Top Angular 2 Interview Questions and Answers - Essential Guide for Job Seekers

Traceur compiler takes classes, generators, and other features from ECMAScript edition 6 (ES6) and compiles it into JavaScript ES5 that runs on the browser. This means developers can use the code from a future version that has more features and encourages design patterns.

Any change that occurs in the component gets propagated from the existing component to its children. If this change needs to be reflected its parent component, you can use using Event Emitter api to emit the event.

EventEmitter is class in @angular/core module that is used by directives and components to emit events.

@output() somethingChanged = new EventEmitter();

You can use somethingChanged.emit(value) to emit any event. You can do this in setter when the value is changed in the class.

String Interpolation is a special syntax in Angular 2 which is a more efficient alternative to property binding. It is used to display dynamic data on an HTML template while facilitating you to make changes on the component.ts file and fetch data for the HTML template.

Below is an example of a String Interpolation syntax. It should be between double curly braces {{ }} and hence also called a moustache syntax:

In Angular 2, you can create custom pipes. The simplest way is as follows.

import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({name: 'Pipename'})
    export class Pipeclass implements PipeTransform {
    transform(parameters): returntype { }
}

Directives are the extended HTML attributes and they are also the most important features of Angular applications. They introduce syntax or markup.

There are 3 kinds of directives-

• Components
• Structural
• Attribute

In Angular 2, the RouterOutlet is a directive present in the router library to be used as a component. It marks the spot in a template for the router to display the components for that outlet.

Every outlet can have its unique name, which is determined by the optional name attribute. The name once set cannot be changed dynamically. If no value has been set, the default value is "primary".

<router-outlet></router-outlet>

<router-outlet name="left"></router-outlet>

<router-outlet name="right"></router-outlet>

The router outlet emits an activate event during the instantiation of a new component. When the component is destroyed, it is deactivated.

<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>

Angular has a robust DI framework that gives declared dependencies to a class upon instantiation. To inject a service, you must first create and register the injectable service.

In all Angular version from 2 onwards, there is a common feature called Pipes. This feature helps developers create custom pipes.

Pipes are used to write display-value transformations that developers can declare in their HTML. A pipe inputs data and transforms it into the required output.

Pipes in Angular2

There are some pipe provided by angularjs are given below-

• Uppercase/Lowercase Pipe
• Date Pipe
• Currency Pipe
• JSON Pipe
• Async Pipe

With lazy loading, JS components can be loaded asynchronously on activation on a specific route.

• Download and install ocLazyLoad.js
• Add the module in the application
• Load the file in the required controller
• Add to the router’s code as