Angular Interview Questions

Angular is one of the most promising languages. Rich in feature set, this technology is worth to work hard for. Below is the list of best Angular interview questions and answers. These questions have been divided as per levels - beginner, intermediate and advanced.

1 .
what is mergemap in angular ?
MergeMap essentially is a combination of mergeAll and map. MergeAll takes care of subscribing to the 'inner' Observable so that we no longer have to Subscribe two times as mergeAll merges the value of the 'inner' Observable into the 'outer' Observable.
2 .
What Are ngIf and ngFor? Can You Show a Small Example to Use Them?
Just like if and for in other languages, ngIf and ngFor are used as control statements. Example –
<p *ngIf="display">Show this only if the Boolean "display" is true</p>
Where the display is a boolean with the value true or false. Learn more about ngIf.
 
ngFor is used to loop through and display elements of an array (set of data).
<tr *ngFor="let student of students; let i = index"> <td>{{student.name}}

</td> <td>{{i}}</td> </tr>‚Äč
The second part (i=index) is optional and only needed if you want to display the index.
3 .
What Is the Digest Cycle?
Digest cycle is the process of monitoring watchlist to track the changes in the value of the watch variable. The digest cycle is implicitly triggered, but we can also trigger it manually using $apply() function.
4 .
Is It Possible to Create a Custom Pipe? How?
Yes, we can create custom pipes.
 
* Pipe metadata @Pipe decorator can be imported from core Angular library
* Pipe is a class that is decorated with the above metadata (@Pipe({name: 'myCustomPipe'}))
* The next step is to define the transformation. For this, the pipe class should implement the method transform() of the PipeTransform class.
* Specify the pipe name in the main code
<p>Size: {{number | myCustomPipe: 'Error'}}</p>
5 .
What are angular lifecycle hooks?
Angular has 8 lifecycle hooks and these are,
 
* ngOnInit() and ngOnDestroy() – called only once.
* ngAfterContentInit() and ngAfterViewInit() – Called after the projected content and view has been initialized.
* ngAfterContentChecked() and ngAfterViewChecked() – Called every time the projected content and view have been checked.
* ngOnChanges() – Called after @Input property changes. (Bounded input properties)
* ngDoCheck() – Called during all the change detection run.

All the above (onChanges, onInit, DoCheck etc..) should be imported from @angular/core.
6 .
What is webpack in angular?
Angular uses webpack module bundler to bundle the source codes and also helps to load the code chunks from server to browser.
7 .
What is smart and dumb components?
A dumb component is not aware of what happens outside itself. It only receives input via property bindings and only emits output data as events.
 
Using smart and dumb components is a good practice. It greatly improves separation of concerns, making your application easier to understand and maintain. If your database or back-end API changes, you don’t have to worry about your dumb components. It also makes your dumb components more flexible, allowing you to reuse them more easily in different situations. If your application needs the same component twice, where one time it needs to write to a back-end database and another time it needs to write to an in-memory database, a dumb component allows you to accomplish exactly that.
8 .
How angular safe from XSS/CSRF/XSRF attacks?
Angular’s internal CookieXSRFStrategy and DomSanitizer classes are helping us to be safe XSS/CSRF/XSRF. 
 
DomSanitizer takes care of removing the dangerous bits in order to prevent an XSS attack.
 
CookieXSRFStrategy takes care of preventing CSRF/XSRF attacks.
 
CSRF/XSRF protection is enabled by default on the client but only works if the backend sets a cookie named XSRF-TOKEN with a random value when the user authenticates.
9 .
What are the advantages of Angular 8?
The following are the advantages of Angular 8, and they are as follows:
 
* Higher performance
* Effective clean code development
* debugging templates
* Angular 8 supports multiple apps in a single domain.
* easier implementation.
10 .
What are NgModules in Angular 8?
NgModules in Angular version 8 varies from other JavaScript modules. Each and every Angular app has at least one module called AppModule. The NgModule provides a bootstrap mechanism to launch different applications. Commonly, every Angular App contains many functional modules to do things. The key features of Angular 8 modules are as follows:
 
Own functionality of the NgModule can be exported and can also be used by other NgModules.
Angular 8 NgModule can import functionalities from other NgModules.