Angular Interview Questions Part 2

In this article we are going to see a well curated list of angular interview questions 2021 and answers for experienced as well as freshers.

Part 1 of this series :- Angular Interview Questions Part 1

Part 3 of this series :- Angular Interview Questions Part 3

What is AOT compilation?

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

For this Angular provides two types of compilers JIT and AOT. JIT stands for Just in Time, and AOT stands for Ahead of Time.

The Angular ahead-of-time (AOT) compiler converts our Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

We can use either JIT or AOT compiler for building our application.

//To use JIT compiler for Build run
ng build

//To use AOT compiler for Build run
ng build --prod

What are the advantages of AOT?

• Smaller application size (Angular compiler excluded)
• Faster component rendering (already compiled templates)
• Template parse errors detected earlier (at build time)
• More secure (no need to evaluate templates dynamically)

How are Angular expressions different from JavaScript expressions?

Like JavaScript expressions, Angular expressions can contain literals, operators, and variables. Unlike JavaScript expressions.

Angular expressions can be written inside HTML. Angular expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

Angular expressions support filters, while JavaScript expressions do not.

How are observables different from promises?

Observables:

• Emit multiple values over a period of time.
• Are lazy: they’re not executed until we subscribe to them using the subscribe() method.
• Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values.
• Provide the map for forEach, filter, reduce, retry, and retryWhen operators.
• Deliver errors to the subscribers.

Promises:

• Emit a single value at a time.
• Are not lazy: execute immediately after creation.
• Are not cancellable.
• Don’t provide any operations.
• Push errors to the child promises.

Explain the concept of Dependency Injection?

In software engineering, Dependency Injection is a technique in which an object receives other objects that it depends on. These other objects are called dependencies. The "injection" refers to the passing of a dependency (a service) into the object (a class) that would use it.

There are basically three types of dependency injection:

• Constructor Injection: the dependencies are provided through a class constructor.
• Setter Injection: the client exposes a setter method that the injector uses to inject the dependency.
• Interface Injection: the dependency provides an injector method that will inject the dependency into any client passed to it. Clients must implement an interface that exposes a setter method that accepts the dependency.

Describe the MVVM architecture.

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the presentation layer (the view) – be it via a markup language or GUI code – from the development of the logical layer or back-end logic (the model) so that the view is not dependent on any specific model platform.

Discuss the advantages and disadvantages of using Angular? 

Below are the advantages and disadvantages of Angular.

Advantages of Angular:

• MVC Architecture implementation
• Enhanced Design Architecture
• Dependency Injection (DI)
• TypeScript: better tooling, cleaner code, and higher scalability
• Large community and ecosystem
• Powerful Router 

Disadvantages of Angular:

• Limited SEO options
• Steeper learning curve

What is ngOnInit? How to define it?

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the component/directive is instantiated.

The ngOnInit() method is defined in a component class as below:

class MyComponent implements OnInit {
  ngOnInit() {
    // some code
  }
} 

What is ViewEncapsulation in Angular?

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa

The default ViewEncapsulation is Emulated, this view encapsulation emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. Angular adds the CSS to the global styles.

Angular provides there types of View Encapsulation. They are as follows:

• Emulated:  Styles from main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.
• Native: Styles from main HTML do not propagate to the component. Styles defined in this
• None: Styles from the component propagate back to the main HTML and therefore are visible to all components on the page. Be careful with apps that have None and Native components in the application. All components with None encapsulation will have their styles duplicated in all components with Native encapsulation.

What is the purpose of Async pipe?

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Below is an example of Async pipe

<tbody *ngFor="let product of products$ | async">
    <tr>       
        <td>{{product.Brand}}</td>
        <td>{{product.Price }}</td>
        <td>{{product.Provider}}</td>
    </tr>
</tbody>

What is the purpose of common module?

Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule, which is included automatically in the root AppModule when you create a new app with the CLI new command.

How to use polyfills in Angular application?

Polyfills in angular are few lines of code which make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers.

When we create a project with the ng new command, a src/polyfills.ts configuration file is created as part of our project folder. This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

What is an Angular Library?

An Angular library is an Angular project that differs from an app in that it cannot run on its own. For example, to add reactive forms to an app, add the library package using ng add @angular/forms, then import the ReactiveFormsModule from the @angular/forms library in your application code.

If you have developed functionality that is suitable for reuse, you can create your own libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers. 

Below is the command to create new Angular Library

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib

What is a Provider in Angular?

A provider in angular is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.

A provider is an object declared to Angular so that it can be injected in the constructor of your components, directives and other classes instantiated by Angular. A service is a particular type of provider that is declared with its class name, as you can see in the Angular tutorial.

Below is an example of providers usage in a app.module.ts file

import { NgModule } from '@angular/core';


import { UserService } from './user.service';


@NgModule({
  providers: [UserService],
})
export class UserModule {
}

What are Reactive Forms in Angular?

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. Angular provides methods to create and update form controls, check progress using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.

This is Live Example of Reactive forms in Angular :- Reactive Forms

What are Dynamic Forms in Angular?

Dynamic forms in angular allows us to make it faster and easier to generate different versions of such a forms, we can create a dynamic form template based on metadata that describes the business object model. Wr can then use the template to generate new forms automatically, according to changes in the data model.

The technique is particularly useful when you have a type of form whose content must change frequently to meet rapidly changing business and regulatory requirements.

This is Live Example of Reactive forms in Angular :- Dynamic Forms

What are Template Driven Forms in Angular?

Template-driven forms use two-way data binding to update the data model in the component as changes are made in the template and vice versa. Angular supports two design approaches for interactive forms. Template-driven forms are suitable for small or simple forms, while reactive forms are more scalable and suitable for complex forms. 

This is Live Example of Reactive forms in Angular :- Template Driven Forms

Checkout other Articles on Angular Interview Questions series from below Links

Part 1 of this series :- Angular Interview Questions Part 1

Part 3 of this series :- Angular Interview Questions Part 3

Happy Coding!