Angular

 Angular Interview Questions and Answer

1. What is angular?

 Angular is a development platform, built on Typescript. As a platform, Angular includes:

• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
• A suite of developer tools to help you develop, build, test, and update your code.
• Created by Google and developed by typescript itself.

2. What is AOT compilation in angular?

 AOT stands for Ahead of Time.The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

 Syntax: ng build appName --aot

3. What is Shadow DOM in angular?

  Shadow DOM brings Encapsulation to HTML Elements. Using the Shadow DOM, markup, styles, and behaviors are scoped to the element and do not clash with other nodes of the DOM. The Shadow DOM is part of Web Components, which encapsulates styles and login of the element.

Advantage: Everything whatever we add to the shadow tree becomes local, even styles. It isolates the DOM, it won't appear in the global DOM.

Scoping of CSS: Styles created inside the single shadow DOM element are isolated are isolated and stays in the scope of that shadow DOM.

4. What are the advantages of angular over other frameworks?

• Features that are provided out of the box - Angular provides a number of built-in features like, routing, state management, rxjs library and http services straight out of the box. This means that one does not need to look for the above stated features separately. They are all provided with angular.
• Declarative UI - Angular uses HTML to render the UI of an application. HTML is a declarative language and is much easier to use than JavaScript.
• Long-term Google support - Google announced Long-term support for Angular. 

5. What are the essential building blocks of angular?

1. Components : The concept of Angular is based around Components, which is the first building block. Components follow tree structures where the App component is the root component. A component encapsulates the logic of the view, data, and the HTML mark-up. Every app must have at least one part. The more the parts of smaller sizes, the better is the readability of the code.
2. Module: The second most crucial building block is a container that groups related components. The default module in an application is the app module. Blades should be small in size and have related components.

The other essential building blocks of Angular are:

• Templates: Templates are written in HTML and contain Angular elements and attributes. Models provide a dynamic view to the user by combining information from the controller and view and rendering it.
• Directives: Directives allow developers to add new HTML syntax, that is application-specific. The behavior is essentially added to the existing DOM elements.
• Services: Rather than calling the Http service, Angular allows for the creation of new service classes. When new Services are created in Angular, they can be used by different components.

6. What is component in angular?

• In Angular, components are the basic building blocks, which control a part of the UI for any application.

• A component is defined using the @Component decorator. Every component consists of three parts, the template which loads the view for the component, a stylesheet which defines the look and 

• feel for the component, and a class that contains the business logic for the component.
• For creating a component, inside the command terminal, navigate to the directory of the application created, and run the following command: ng g c componentName
• here g for generate and c for component

• @Component({
          selector: 'app-test',
          templateUrl: './test.component.html',
          styleUrls: ['./test.component.css']
        })

7. What are the disadvantage of angular?

• For short-term projects or light-weight websites that have more static content do not require a complex framework like Angular.

• Apps that have a microservice design approach will find too many unused features if they use Angular since it is a complete solution. 

• Whenever there is a version change, developer has to upgrade their project which is a overhead.

• Constant learning of new added features.

8. What is angular CLI and how to use it?

• CLI (Command Line Interface) is used to achieve the functionalities by just typing some commands in the terminal.

• For ex: you can create a project, component, directive, test files, running a project etc.

• This way, development and testing processes both become faster and the app's initialization, configuration, and development process become straightforward and easy.

For example,

To create a new application, we should type –

1

ng new <appname> [options]

2

to create a class using CLI (in Angular 7), we have to type –

3

ng generate class MySampleClass [options]

4

to generate a component,

5

ng g c <componentname>

9. What are directives in angular ?

Directives helps us to write application-specific custom HTML syntax. The new language is written in the DOM, and the Angular compiler executes the directive functions when it finds a new HTML syntax. 
There are three types of directives – attribute, component, structural.

10. What is structural directives in angular?

Structural directives change the structure of DOM. Examples, *ngIf and *ngFor. It changes the structure of the DOM.

<div *ngIf = “product” class=”name”>{{product.name}}</div>

Same way.

<ul> <li *ngFor = “var product in productlist”>{{product.name}}</li> </ul> 

11. How dependency injection is done in angular?

The @Injectable() decorator specifies that Angular can use this class in the DI system. The metadata, providedIn: 'root', means that the AngularService is visible throughout the application. The service instance then injected in the constructor of the component.

• @Injectable() decorator for the service.

• @NgModule for NgModule.

12. What are templates in angular ?

The template is simply an HTML view where binding controls can display data to the properties of the Angular component. Templates can be defined inline using the template property as –

Template:

`<div>Sample Template</div>` 

Or can be called from a different HTML file by using @Component decorator’s URL property –

templateUrl: 'app/app.component.html' 

13. What is ECMA script?

ECMA stands for European Computer Manufacturers Association. ECMAScript is a Standard for scripting languages such as JavaScript, JScript, etc. It is a trademark scripting language specification.

14. What are the new features in ES2015 or ES6?

• Default Parameters
• Rest and Spread Parameters
• Template Literals
• Multi-line Strings
• Destructuring Assignment
• Enhanced Object Literals
• Arrow Functions
• Promises
• Block-Scoped Constructs: Let and Const
• Classes
• Modules

15. What are Rest and Spread parameter in ES6?

Rest Parameter:
Function definition:
function f (x, y, ...a) {
return (x + y) * a.length
}
Syntax to call :
f(1, 2, "hello", true, 7);
The last three arguments will be stored in ...a.

Spread Parameter:
var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
function f (x, y, ...a) {
return (x + y) * a.length
}

Syntax while calling using this operator :
f(1, 2, ...params);
var str = "foo"
var chars = [ ...str ] // [ "f", "o", "o" ]