Category: Angular Interview Questions

Template statements are properties or methods used in HTML for responding to user events. With these template statements, the application that you create or are working on, can have the capability to engage users through actions such as submitting forms and displaying dynamic content.

For example, 

<button (click)=”deleteHero()”>Delete hero</button>

The template here is deleteHero. The method is called when the user clicks on the button.

String Interpolation is a one-way data-binding technique that outputs the data from TypeScript code to HTML view. It is denoted using double curly braces. This template expression helps display the data from the component to the view. 

{{ data }}

In Angular, every component has a lifecycle. Angular creates and renders these components and also destroys them before removing them from the DOM. This is achieved with the help of lifecycle hooks. Here’s the list of them – 

1. ngOnChanges() – Responds when Angular sets/resets data-bound input properties.
2. ngOnInit() – Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties/
3. ngDoCheck() – Detect and act upon changes that Angular can’t or won’t detect on its own.
4. ngAfterContentInit() – Responds after Angular projects external content into the component’s view.
5. ngAfterContentChecked() – Respond after Angular checks the content projected into the component.
6. ngAfterViewInit() – Respond after Angular initializes the component’s views and child views.
7. ngAfterViewChecked() – Respond after Angular checks the component’s views and child views.
8. ngOnDestroy – Cleanup just before Angular destroys the directive/component.

The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties. The scope is available for both the view and the controller. When you make a controller in Angular, you pass the $scope object as an argument. 

AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects. The ng-controller directive defines the application controller.

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:

1. Emulated – styles from the main HTML propagate to the component.
2. Native – styles from the main HTML do not propagate to the component. 
3. None – styles from the component propagate back to the main HTML and therefore are visible to all components on the page.

Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services. Some inbuilt filters are as follows. 

• date – Format a date to a specified format.
• filter – Select a subset of items from an array.
• Json – Format an object to a JSON string.
• limitTo –  Limits an array/string, into a specified number of elements/characters.
• lowercase – Format a string to lowercase.

NgModules are containers that reserve a block of code to an application domain or a workflow. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime. In addition, it identifies the module’s components, directives, and pipes, making some of them public, through the export property so that external components can use them.

For every change detection cycle in Angular, an impure pipe is called regardless of the change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed to these pipes can be mutable. 

By default, all pipes are pure. However, you can specify impure pipes using the pure property, as shown below.

@Pipe({

  name: 'demopipe',

  pure : true/false 

})

export class DemopipePipe implements PipeTransform {

These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn’t use any internal state, and the output remains the same as long as the parameters passed stay the same. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.