21. How to create and use a custom pipe?
Answer:
Pipes are used in templates to convert output to user friendly and readable form within interpolation braces i.e. {{ release | date }}. The '|' is denoted as pipe.
A pipe takes in data as input and transforms it to a desired output.
We have a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe in Angular.
You can write your own custom pipes.
Steps to create custom pipe:
- Creates a TypeScript class.
- Decorate the class with "@Pipe" decorator.
- Implements PipeTransform interface in TypeScript class.
- Override the transform() method
- Configure the class with @NgModule
Example of custom pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
22. Explain the data binding Angular 2.
Answer:
Data binding is the connection bridge between view and business logic in the application. It is the automatic synchronization between Model and the View.
Following are the types of data binding available in Angular 2.
- Interpolation
It is the easiest way for data binding.
Example: <h3>{{vm.student.name}}</h3>
- One Way Binding
In Angular 1, ng-bind directive is used for data binding. But in Angular 2, we use HTML DOM element property for one way binding.
Example: <h1 [innerText]="student.name"></h1>
- Two Way Binding
Two-way data binding combines the input and output binding into a single notation using the ngModel directive.
Example: <input [(ngModel)]="student.name"/>
- Event Binding
Event binding can be done by using any valid HTML event like click, focus, blur etc.
Example: <button (click)="sendForm()">Send</h1>
23. What is the event binding in Angular 2?
Answer:
Event binding can be done by using any valid HTML event like click, focus, blur etc. Event binding allows us to send information from the view to the component class. Such information always invoked by click, blur, typing etc. In angular 2, ng-click is replaced by (click), ng-submit is replaced by (submit).
In the following example, button click event have been defined. On button click, a message is written to be displayed on screen.
app.component.tsimport { Component } from '@angular/core';
@Component({
selector: 'test-app',
templateUrl: './app/databindingexample.html'
})
export class AppComponent {
msgText = '';
onClickMe() {
this.msgText = "Welcome!";
}
}
databindingexample.html
<div>
<h5>Event binding Example</h5>
<button (click)="onClickMe()">Click me!</button>
<br/><br/>
<span> {{msgText}} </span>
</div>
24. What are directives in Angular 2?
Answer:
Directives allow to attach behavior to elements in the DOM. It is a class which contains metadata attached to the class by the @Directive decorator.
Directive decorator provides additional metadata that determines how the directive should be processed, instantiated and used at runtime.
There are three types of directive available in Angular 2.
- Components: Components are directive that have the template.
- Structural directive: Structural directives change the DOM layout by adding and removing DOM elements.
- Attribute directive: Attribute directives change the appearance or behavior of an element, components or other directive.
25. Explain Meta-data in Angular 2.
Answer:
Meta-data is the way for processing the class and the component. It is used to decorate the class. There are multiple decorators used to pass the variable to a class.
@Component decorator are used to pass the variable to the class. All the decorator are used by the meta-data to attach variable to the component or module class.
