#angular 2 ui components

[sagar-jaybhay]

$event, ngFor, trackBy, index and Pipes in Angular

New Post has been published on https://sagarjaybhay.net/event-ngfor-trackby-index-and-pipes-in-angular/

$event, ngFor, trackBy, index and Pipes in Angular

Directives in Angular By Sagar Jaybhay

$event :

Is an object which is exposed by angular which contains event data.

In angular 2 way data binding means property binding and data binding.

<input [(ngModel)]="textName" />

[] this Square brackets on outside for property binding.

() this parenthesis on the inside for event binding.

If we are not importing forms module in angular forms then it will throw an error which is not known property of HTML element.

import FormsModule from '@angular/forms';

ngFor:

This is structural directive.

*ngFor="let emp of employees"

trackBy

This is used with ng-for directive because if you have data bind on some button event and that data is not changed again and but angular doesn’t know about to that so he will create that element again and again. So used trackBy with for loop.

<tr *ngFor="let emp of employees; track: trackByEmpCode">

trackByEmpCode(index: number, employee: any): string console.log(index); console.log(employee); return employee.code;

To get an index over the collection used below syntax.

<tr *ngFor="let emp of employees; trackBy: trackByEmpCode; let i = index">

How to get first and last element?

*ngFor=" let emp of employees; trackBy: trackByEmpCode; let i = index; let isFirst = first; let isLast = last ">

How to find even and Odd element:

*ngFor=" let emp of employees; trackBy: trackByEmpCode; let i = index; let isFirst = first; let isLast = last; let isOdd = odd; let isEven = even "

Pipes In Angular: –

Pipe helps to transform data before display on UI. Like. Uppercase, date, currency, lowercase, decimal  are different in built pipe. To apply pipe you can use | (pipe) character

<td> uppercase </td> <td> emp.geneder </td> <td> currency: '$' </td>

For formatting, you should refer to angular documentation.

To create a custom pipe- Create a class with pipe and implement PipeTransform interface and it is present in.

import PipeTransform from '@angular/core';

Then implement the method for that interface.

transform(value: string, gender: string) if (gender.toLowerCase() === 'male') return 'Mr. ' + value; else return 'Mrs. ' + value;

Which is a transform method? Value parameter it gets explicitly but if you want to pass another value then you need to pass that for this method. In angular 2 only pipe is imported present from the angular core but the next versions required to import Pipe and PipeTransform. After this, you need to register your pipe in app.module and add into declaration array of that module. Also, remember you have to the given name of pipe in interpolation syntax not the class name of that pipe.

<td> employeeTitle: emp.geneder </td>

[sagar-jaybhay]

Interpolation In Angular

New Post has been published on https://sagarjaybhay.net/interpolation-in-angular/

Interpolation In Angular

Interpolation In Angular – By Sagar Jaybhay

It is called as data binding and in angular, we have 3 categories of data binding.

One Way data binding: it is from component to view template

One way data binding: it is from view template to component

Two-way data binding: it is from component to view and vice versa.

One Way Data Binding:

In interpolation you can use mathematical operation, validation, condition checking. By using interpolation you can bind class properties to element properties. Interpolation is all about moving class data to html template in one direction means component class properties to html element properties.

<img style="height: 200px; width: 200px" src=" imagePath " />

Property Binding:

Property Binding and Interpolation flow data from one direction.

<img style="height: 200px; width: 200px" [src]="imagePath" />

Interpolation v/s Property binding

Interpolation is special syntax that angular converts into a property binding.

In concatenation of string we can use interpolation instead of property binding

To set an element property to a non-string data value, you must use property binding

You can use canonical variation means for binding to property of html element rather than using [] braces use bind-property-name.

<span bind-innerHtml="_first"></span>

For security reason angular data-binding automatically sanitizes malicious content before displaying it on browser.

DOM: Angular all about binding to dom object properties and not html attribute

Audio Url – https://audiomack.com/song/sagar-170/interpolation-in-angular-by-sagar-jaybhay