$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
      "

event,pipes,ngFor directives in angular

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>{{ emp.name | uppercase }}</td>
      <td>{{ emp.geneder }}</td>
      <td>{{ emp.annualSalary | 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>{{ emp.name | employeeTitle: emp.geneder }}</td>
Custom Pipes in ANgular by Sagar Jaybhay

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *