Angular Interview Questions and Answers
Question - 91 : - Explain the various types of filters in AngularJS.
Answer - 91 : -
In order to format the value of expression so that it can be displayed to the user, AngularJS has filters. It is possible to add these filters to the controllers, directives, services, or templates. AngularJS also provides support for creating custom filters.
Organizing data in such a way that it is displayed only when certain criteria are fulfilled is made possible using filters. Filters are added to the expressions using the pipe ‘|’ character.
Some AngularJS filters are:
- currency: Formats a number to the currency format
- date: Formats a data to some specific format
- filter: Selects a subset of items from an array
- json: Formats an object to a JSON string
- limitTo: Limits an array or string into a specified number of characters or elements
- lowercase: Formats a string to lowercase
- number: Formats a number to a string
- orderBy: Orders an array by an expression
Question - 92 : - What is SPA(Single Page Application)? Contrast SPA technology with traditional web technology.
Answer - 92 : -
With SPA technology, only a single page - index.HTML - is maintained, although the URL keeps on changing. SPA technology is faster and easier to develop than traditional web technology.
In conventional web technology, as soon as a client requests a web page, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.
Question - 93 : - What is the code for creating a decorator?
Answer - 93 : -
We create a decorator called Dummy:
functionDummy(target) {
dummy.log('This decorator is Dummy', target);
}
Question - 94 : - What is ViewEncapsulation and how many ways are there to do it in Angular?
Answer - 94 : -
To put it simply, ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation:
- Emulated: Styles used in other HTML spread to the component.
- Native: Styles used in other HTML don’t spread to the component.
- None: Styles defined in a component are visible to all components of the application.
Question - 95 : - What are Lifecycle hooks in Angular? Explain some life cycle hooks.
Answer - 95 : -
Angular components enter their lifecycle from the time it is created to the time it is destroyed. Angular hooks provide ways to tap into these phases and trigger changes at specific phases in a lifecycle.
- ngOnChanges(): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.
- ngOnInit(): This hook gets called once, after the ngOnChanges hook.
- It initializes the component and sets the input properties of the component.
- ngDoCheck(): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.
- We can implement our change detection algorithm in this hook.
- ngAfterContentInit(): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.
- ngAfterContentChecked(): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.
- ngAfterViewInit(): It responds after a component's view, or a child component's view is initialized.
- ngAfterViewChecked(): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked.
- ngOnDestroy(): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.
Question - 96 : - What is the difference between constructor and ngOnInit?
Answer - 96 : -
TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
Question - 97 : - What is the option to choose between inline and external template file?
Answer - 97 : -
You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.
The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. But normally we use inline template for small portion of code and external template file for bigger views. By default, the Angular CLI generates components with a template file. But you can override that with the below command,
ng generate component hero -it
Question - 98 : - What is the purpose of ngFor directive?
Answer - 98 : -
We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,
{{ user }}
The user variable in the ngFor double-quoted instruction is a template input variable
Question - 99 : - What is the purpose of ngIf directive?
Answer - 99 : -
Sometimes an app needs to display a view or a portion of a view only under specific circumstances. The Angular ngIf directive inserts or removes an element based on a truthy/falsy condition. Let's take an example to display a message if the user age is more than 18,
You are not eligible for student pass!
Question - 100 : - What happens if you use script tag inside template?
Answer - 100 : -
Angular recognizes the value as unsafe and automatically sanitizes it, which removes the script tag but keeps safe content such as the text content of the script tag. This way it eliminates the risk of script injection attacks. If you still use it then it will be ignored and a warning appears in the browser console.
Let's take an example of innerHtml property binding which causes XSS vulnerability,
export class InnerHtmlBindingComponent {
// For example, a user/attacker-controlled value from a URL.
htmlSnippet = 'Template Syntax';
}