Interview questions for Android 2

---

1. What is TypeScript?

TypeScript is a superset of JavaScript that offers excellent consistency. It is highly recommended, as it provides some syntactic sugar and makes the code base more comfortable to understand and maintain. Ultimately, TypeScript code compiles down to JavaScript that can run efficiently in any environment.

2. What is data binding? Which type of data binding does Angular deploy?

Data binding is a phenomenon that allows any internet user to manipulate Web page elements using a Web browser. It uses dynamic HTML and does not require complex scripting or programming. We use data binding in web pages that contain interactive components such as forms, calculators, tutorials, and games. Incremental display of a webpage makes data binding convenient when pages have an enormous amount of data.
Angular uses the two-way binding. Any changes made to the user interface are reflected in the corresponding model state. Conversely, any changes in the model state are reflected in the UI state. This allows the framework to connect the DOM to the Model data via the controller. However, this approach affects performance since every change in the DOM has to be tracked.

3. What are the key parts of the Angular 8 Architecture?

The key parts of the Angular 8 Architecture are as follows:
• Modules
• Components
• Templates
• MetaData
• Data-Binding
• Directives
• Services
• Dependency Injection

4. What is an Angular Universal?

The Angular Universal is defined as the process of SSR (server-side rendering) of your particular application to HTML present on the Server. Basically, all the Angular applications are single-page applications so the rendering always occurs on the browser. The entire process of rendering single-page applications is known as the client-side rendering process (CSR).

5. What are Single Page Applications (SPA)?

Single-page applications are web applications that load once with new features just being mere additions to the user interface. It does not load new HTML pages to display the new page’s content, instead generated dynamically. This is made possible through JavaScript’s ability to manipulate the DOM elements on the existing page itself. A SPA approach is faster, thus providing a seamless user experience.

6. Explain string interpolation and property binding in Angular?

String interpolation and property binding are parts of data-binding in Angular.
Data-binding is a feature in angular, which provides a way to communicate between the component(Model) and its view(HTML template).
Data-binding can be done in two ways, one-way binding and two-way binding.
In Angular, data from the component can be inserted inside the HTML template. In one-way binding, any changes in the component will directly reflect inside the HTML template but, vice-versa is not possible. Whereas, it is possible in two-way binding.

String interpolation and property binding allow only one-way data binding.
String interpolation uses the double curly braces {{ }} to display data from the component. Angular automatically runs the expression written inside the curly braces, for example, {{ 2 + 2 }} will be evaluated by Angular and the output 4, will be displayed inside the HTML template. Using property binding, we can bind the DOM properties of an HTML element to a component’s property. Property binding uses the square brackets [ ] syntax.

7. How are Angular expressions different from JavaScript expressions?

The first and perhaps, the biggest difference is that Angular expressions allow us to write JavaScript in HTML which is not the case when it comes to JavaScript expressions.
Next, Angular expressions are evaluated against a local scope object whereas JavaScript expressions against global window object. Let’s understand that better with an example :

Consider the following component named test:

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-test’,
template: `
<h4>{{message}}</h4>
`,
styleUrls: [‘./test.component.css’]
})
export class TestComponent implements OnInit {
message:string = “Hello world”;
constructor() { }

ngOnInit() {
}
}

As one can see that Angular expression is used to display message property of a component. Since we are using Angular expressions, in the present template, we cannot access a property outside of its local scope, which in this case is TestComponent.
This proves that Angular expressions are always evaluated based on scope object rather than the global object.

Next difference is how Angular expressions handle null and undefined.
Consider the following JavaScript example:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>JavaScript Test</title>
</head>
<body>
<div id=”foo”><div>
</body>
<script>
‘use strict’;
let bar = {};
document.getElementById(‘foo’).innerHTML = bar.x;
</script>
</html>

If you run the above code, you will see undefined displayed on the screen. Although it’s not ideal to leave any property undefined, the user does not need to see this.
Now consider the following Angular example:

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-new’,
template: `
<h4>{{message}}</h4>
`,
styleUrls: [‘./new.component.css’]
})
export class NewComponent implements OnInit {
message:object = {};
constructor() { }

ngOnInit() {
}

}

If you render the above component, you will not see undefined being displayed on the screen.

Next, in Angular expressions one cannot use loops, conditionals and exceptions.

The difference which makes Angular expressions quite beneficial is the use of pipes. Angular uses pipes(called filters in AngularJS), which can be used to format data before displaying it. Let’s see one predefined pipe in action:

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-new’,
template: `
<h4>{{message | lowercase}}</h4>
`,
styleUrls: [‘./new.component.css’]
})
export class NewComponent implements OnInit {
message:string = “HELLO WORLD”;
constructor() { }

ngOnInit() {
}

}

In the above code we have used a predefined pipe called lowercase, which transforms all the letters in lowercase. Therefore, if you render the above component, you will see “hello world” being displayed.

In contrast, JavaScript does not have the concept of pipes.

8. What are the advantages of Bazel?

The following are the key advantages of Bazel, and they are as follows:
• It provides you the possibility to make both frontends and backends with the same tool.
• Availability of incremental build and test options.
• In Bazel, you have the possibility for cache and remote builds on the build farm.