Angular Interview Questions and Answers(4)

谁践踏了优雅 2023-10-14 13:56 11阅读 0赞

# 1)What do you understand by Angular bootstrapping? #

*  Angular bootstrapping is nothing but to allow developers to initialize or start the Angular application. Angular supports two types of bootstrapping:
    
     *  Manual bootstrapping
     *  Automatic bootstrapping
 *  Manual bootstrapping: Manual bootstrapping provides more control to developers and facilitates them regarding how and when they need to initialize the Angular app. It is useful when professionals wish to perform other tasks and operations before Angular compiles the page.
 *  Automatic bootstrapping: As the name specifies, automatic bootstrapping is started automatically to start the Angular app. The developers need to add the ng-app directive to the application’s root if they want Angular to bootstrap the application automatically. Angular loads the associated module once it finds the ng-app directive and, further, compiles the DOM.

# 2)What is the digest cycle process in Angular? #

*  The digest cycle process in Angular is the process that is used to monitor the watchlist to track changes in the watch variable value.
 *  There is a comparison between the present and the previous versions of the scope model values in each digest cycle.

# 3)What are the key differences between a Component and a Directive in Angular? #

*  `A Component is· a directive that uses shadow DOM to create encapsulated visual behavior.`
 *  Usually, `components are used to create UI widgets by breaking up the application into smaller parts.`
 *  In short, we can say that `a component (@component) is a directive-with-a-template.`  
    ![在这里插入图片描述][17d147c02dc744fba17503ebae6d20df.png]

# 4)What do you understand by Angular MVVM architecture? #

*  The MVVM architecture or Model-View-ViewModel architecture is `a software architectural pattern`that provides a facility to developers to separate the development of the graphical user interface (the View) from the development of the business logic or back-end logic (the Model).
 *  By using this architecture, the view is not dependent on any specific model platform.

The Angular MVVM architecture consists of the following three parts:

- Model
    - View
    - ViewModel

![在这里插入图片描述][4fc7582a945d4a8fa4f850d75937249b.png]  
`Model:` The Model consists of the structure of an entity and specifies the approach. In simple words, we can say that the model contains data of an object.

`View:`The View is the visual layer of the application. It specifies the structure, layout, and appearance of what a user sees on the screen. It displays the data inside the Model, represents the model, and receives the user’s interaction with the view in the form of mouse clicks, keyboard input, screen tap gestures, etc., and forwards these to the ViewModel via the data binding properties. In Angular terms, the View contains the HTML template of a component.

`ViewModel:`The ViewModel is an abstract layer of the application. It is used to handle the logic of the application. It also manages the data of a model and displays it in the view. View and ViewModel are connected with two-way data-binding. If you make any changes in the view, the ViewModel takes a note and changes the appropriate data inside the model.

# 5) What is the purpose of AsyncPipe in Angular? #

*  The AsyncPipe is used to subscribe to an observable or promise and return the latest value it has emitted.
 *  When a new value is emitted, the pipe marks the component that has been checked for changes.
 *  See the following example where a time observable continuously updates the view for every 2 seconds with the current time.

@Component({
          
      selector: 'async-observable-pipe',  
      template: `<div><code>observable|async</code>:  
           Time: {
         { time | async }}</div>`  
    })  
    export class AsyncObservablePipeComponent {
          
      time = new Observable(observer =>  
        setInterval(() => observer.next(new Date().toString()), 2000)  
      );  
    }

# 6) What do you understand by services in Angular? #

*  In Angular, `services are singleton objects`that get instantiated only once during the lifetime of an application.
 *  An Angular service contains methods that are used to `maintain the data throughout the life of an application.`
 *  Angular services are used to organize as well as share business logic, models, or data and functions with `various components of an Angular application.`
 *  Angular services offer some functions that can be invoked from an Angular component, such as a controller or directive.

# 7) What is the key difference between a constructor and ngOnInit? #

*  `Constructor is a default method in TypeScript classes t`hat are normally used for the`initialization purpose`.
 *  On the other hand, `the ngOnInit is specifically an Angular method and is used to define Angular bindings.`
 *  Even though constructors are getting called first, it is always preferred to move all of your Angular bindings to the ngOnInit method.
 *  See the following example how we can use ngOnInit by implementing OnInit interface as follows:

export class App implements OnInit{
          
      constructor(){
          
         //called first time before the ngOnInit()  
      }  
      ngOnInit(){
          
         //called after the constructor and called  after the first ngOnChanges()  
      }  
    }

# 8）What do you understand by observable and observer in Angular? #

*  Observable: `An observable is a unique object just like a promise that that is used to manage async code.`
 *  Observables are not part of the JavaScript language so the developers have to rely on a popular Observable library called RxJS.
 *  The observables are created using the new keyword.

See a simple example of observable to understand it better:、

import {
         Observable } from 'rxjs';  
    const observable = new Observable(observer => {
          
      setTimeout(() => {
          
        observer.next('This is a message from Observable!');  
      }, 1000);  
    });

*  Observer: Any object that has to be notified when the state of another object changes is called an observer. An observer is an interface for push-based notifications delivered by an Observable.

See the structure of an observer:

interface Observer<T> {
          
      closed?: boolean;  
      next: (value: T) => void;  
      error: (err: any) => void;  
      complete: () => void;  
    }

*  The handler that implements the observer interface for receiving observable notifications is passed as a parameter for observable as follows:

myObservable.subscribe(myObserver);

# 9）How do you categorize data binding types in Angular? #

In Angular, we can categorize data binding types in three categories distinguished by the direction of data flow. These data binding categories are:  
\- From the source-to-view  
\- From view-to-source  
\- View-to-source-to-view

Let’s see their possible binding syntax:  
![在这里插入图片描述][bcce9aecbf7b46e1b92c4002551b0110.png]

# 10） What is multicasting in Angular? #

*  Multicasting or Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution.

Let’s take a simple example to demonstrate the multi-casting feature:

[参考：][Link 1]

[17d147c02dc744fba17503ebae6d20df.png]: https://img-blog.csdnimg.cn/17d147c02dc744fba17503ebae6d20df.png
[4fc7582a945d4a8fa4f850d75937249b.png]: https://img-blog.csdnimg.cn/4fc7582a945d4a8fa4f850d75937249b.png
[bcce9aecbf7b46e1b92c4002551b0110.png]: https://img-blog.csdnimg.cn/bcce9aecbf7b46e1b92c4002551b0110.png
[Link 1]: https://www.javatpoint.com/top-angular-interview-questions