Angular Interview Questions and Answers(2)

骑猪看日落 2023-10-13 23:28 135阅读 0赞

# 1) Why is Angular preferred over other frameworks? / What are some advantages of Angular over other frameworks? #

Due to the following features, Angular is preferred over other frameworks:

Extraordinary Built-in Features: Angular provides `several out of the box built-in features`like `routing, state management, RxJS library, Dependency Injection, HTTP services, etc.`That’s why the developers do not need to look for the above-stated features separately.

Declarative UI: `Angular has declarative UI`. It uses HTML to render the UI of an application as it is`a declarative language`. It is much easier to use than JavaScript.

Long-term Google Support: Angular is developed and maintained by Google. `Google has a long term`plan to stick with Angular and provide support.

# 2) What are the different Lifecycle hooks of Angular? Explain them in short. #

When the `Angular components are created, they enter their lifecycle and remain when they are destroyed` Angular Lifecycle hooks are used to `check the phases and trigger changes at specific phases during the entire duration.`

![在这里插入图片描述][092fca973ca34fdc850de3ed94955450.png]

Angular Interview questions  
ngOnChanges( ): This method is called when one or more input properties of the component are changed. The hook receives a `SimpleChanges` object containing `the previous and current values of the property`.

ngOnInit( ): This is `the second lifecycle hook`. It is called once, after the ngOnChanges hook. It is used to i`nitialize the component and sets the input properties of the component.`

ngDoCheck( ): This hook is `called after ngOnChanges and ngOnInit`and is used to detect and act on changes that Angular cannot detect. In this hook, we can implement our `change detection algorithm.`

ngAfterContentInit( ): This hook is called after the first `ngDoCheck hook`. This hook responds after the content gets projected inside the component.

ngAfterContentChecked( ): This hook is called after ngAfterContentInit and every subsequent `ngDoCheck`. It responds after the projected content is checked.

==ngAfterViewInit( ): == This hook is called after `a component's view or initializing a child component's view.`

ngAfterViewChecked( ): This hook is called after `ngAfterViewInit`. `It responds after the component's view or when the child component's view is checked.`

ngOnDestroy( ): This hook is called just before `Angular destroys the component.`This is used to `clean up the code and detach event handlers.`

In the above hooks we have described, the `ngOnInit hook is the most often used hook`. Let’s see how to use the ngOnInit hook. `If you have to process a lot of data during component creation, it's better to do it inside the ngOnInit hook rather than the constructor`:

See the example:

import {
         Component, OnInit } from '@angular/core';  
    @Component({
          
      selector: 'app-test',  
      templateUrl: './test.component.html',  
      styleUrls: ['./test.component.css']  
    })  
    export class TestComponent implements OnInit {
          
      constructor() {
         }  
      ngOnInit() {
          
        this.processData();  
      }  
      processData(){
          
        // Do something..  
      }  
    }

In the above code, you can see that we have imported OnInit, but we have used the ngOnInit function. This is how we can use the rest of the hooks as well.

# 3)What is AOT in Angular? #

In Angular, `AOT stands for Ahead-Of-Time compiler`. It is used to convert your `Angular HTML` and `TypeScript code` into `efficient JavaScript code` during the build phase before the browser downloads and runs that code. By compiling the application during the build process provides a faster rendering in the browser.

# 4) What is the reason for using the AOT compiler in Angular? #

An Angular application is made of `several components and their HTML templates`. Because of these Angular components and templates, the browsers are not able to understand them directly. So, `Angular applications require a compilation process before they run in a browser. That's why AOT compilers are required.`

# 5) What are the biggest advantages of AOT in Angular? #

Following are the advantages of using the AOT compiler in Angular:

The rendering is faster: When we use the AOT compiler, the browser gets a pre-compiled version of the application to download. Here, `the browser loads executable code to render the application immediately, without waiting to compile the app first.`

The Angular framework’s download size is smaller: `AOT facilitates you not to download the Angular compiler`if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Fewer asynchronous requests: `The compiler is used to inline external HTML templates and CSS style sheets within the application JavaScript so`, it eliminates separate AJAX requests for those source files.

Detect template errors earlier: While using the AOT compiler, `developers can easily detect and report template binding errors during the build step before users can see them.`

Better security: AOT provides better security because `it compiles HTML templates and components into JavaScript files before they are served to the client`. Because there are no templates to read and no risky client-side HTML or JavaScript evaluation, so the chances for injection attacks are very rare.

# 6) What is JIT in Angular? #

In Angular, JIT stands for Just-in-Time compiler. The JIT compiler `provides a dynamic translation or run-time compilation`, which provides a way of executing computer code that involves `compilation during the execution of a program at run time rather than before execution`.

# 7) What is the main difference between JIT and AOT in Angular? #

Following are the main differences between JIT and AOT compiler in Angular:

*  `Just-in-Time (JIT) compiler compiles`our app in the browser at run-time while`Ahead-of-Time (AOT) compiler is used to compile your app at build time on the server.`
 *  The JIT compilation runs by default when you run the `ng build (build only), or ng serve (build and serve locally) CLI commands`. This is used for development. On the other hand, we have to include the --aot option with the ng build or ng serve command for `AOT compilation`.
 *  JIT and AOT are both two ways used to compile code in an Angular project. `JIT compiler is used in development mode while AOT is used for production mode`.
 *  `JIT is easy to use. We can easily implement features and debug in JIT mode`because here we have a map file while AOT does not. On the other hand, the biggest advantage of using AOT for production is that it `reduces the bundle size for faster rendering`.

# 8) What is the concept of scope hierarchy in Angular? #

*  Angular provides the `$scope objects into a hierarchy that is typically used by views.`This is called `the scope hierarchy` in Angular. It has`a root scop`e that can `further contain one or several scopes called child scopes.`
 *  In a scope hierarchy, each view has its own $scope. Hence, `the variables set by a view's view controller will remain hidden to other view controllers.`

Following is the typical representation of a Scope Hierarchy:

Root $scope  
    $scope for Controller 1  
    $scope for Controller 2  
    ...  
    ..  
    .  
    $scope for Controller n

# 9) What are the main building blocks of an Angular application? Explain with the pictorial diagram of Angular architecture. #

Following are the main building blocks of an Angular application. You can see them in the following picture:

![在这里插入图片描述][97d1fb69cb05495b8726ec762127d8bf.png]

# 10） What is the difference between Observables and Promises in Angular? #

In Angular, as soon as we make a promise, the execution takes place, but this is not the case with observables because`they are lazy.` It means nothing happens until a subscription is made.

![在这里插入图片描述][fc259232a6f34ca28c5837ce2f2ccee2.png]  
Let’s understand it by an example:

const observable = rxjs.Observable.create(observer => {
          
            console.log('This is what inside an observable');  
            observer.next('Hello JavaTpoint');  
            observer.complete();  
          });  
          console.log('Before subscribing an Observable');  
          observable.subscribe((message)=> console.log(message));

When you run the above Observable, you can see the following messages displayed in the following order:

Before subscribing an Observable  
    This is what inside an observable  
    Hello JavaTpoint

Here, you can see that observables are lazy. Observable runs only when someone subscribes to them. That’s why the message “Before subscribing an Observable” is displayed ahead of the message inside the observable.

Now see the example of a Promise:

const promise = new Promise((resolve, reject) => {
          
            console.log('This is what written inside promise');  
            resolve('Hello JavaTpoint');  
          });  
          console.log('Before calling then method on Promise');  
          greetingPoster.then(message => console.log(message));

When you run the above Promise, you will see the messages displayed in the following order:

This is what written inside Promise  
    Before calling then method on Promise  
    Hello JavaTpoint

Here, you can see that the message inside Promise is displayed first. This means that the Promise runs first, and then the method is called.

The next difference between them is that `Promises are always asynchronous`; even when the Promise is immediately resolved. On the other hand, `an Observable can be both synchronous and asynchronous`.

In the case of the above example, observable is synchronous. Let’s see the case where an observable can be asynchronous:

const observable = rxjs.Observable.create(observer => {
          
      setTimeout(()=>{
          
          observer.next('Hello JavaTpoint');  
          observer.complete();  
      },3000)  
    });  
    console.log('Before calling subscribe on an Observable');  
    observable.subscribe((data)=> console.log(data));  
    console.log('After calling subscribe on an Observable');

When you run the above observable, you will see the messages in the following order:

Before calling subscribe on an Observable  
    After calling subscribe on an Observable  
    Hello JavaTpoint

[092fca973ca34fdc850de3ed94955450.png]: https://img-blog.csdnimg.cn/092fca973ca34fdc850de3ed94955450.png
[97d1fb69cb05495b8726ec762127d8bf.png]: https://img-blog.csdnimg.cn/97d1fb69cb05495b8726ec762127d8bf.png
[fc259232a6f34ca28c5837ce2f2ccee2.png]: https://img-blog.csdnimg.cn/fc259232a6f34ca28c5837ce2f2ccee2.png