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

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.

Read Complete Articles Here:-

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

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

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