Pipes in Angular4

Add this code in ts file Now updated to Angular4

 
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterdata'
})
export class FilterdataPipe implements PipeTransform {
public gender:string;
  transform(empLists: any, arg1:string): any {
    //debugger
return empLists.filter(function(list){
   return list.gender.toLowerCase() === (arg1.toLowerCase());
})
 }
}

Male employe component

 
import { Component, OnInit } from '@angular/core';
import { ServicesComponent } from '../../services/services.component';
import { FilterdataPipe } from '../../shared/pipes/sharedata/filterdata.pipe';
import {Title } from '@angular/platform-browser';
import { PageHeadingService } from '../../services/pagetitle/pagetitleservice.service';

@Component({
  selector: 'app-employeemale',
  templateUrl: './employeemale.component.html',
  styleUrls: ['./employeemale.component.css']
})
export class EmployeemaleComponent implements OnInit {
  /* setting for page title for seo */
public pageTitle:string = "Male Employee";
/* setting for page heading for seo */
public pageHeadTitle:string = "Male Employee";
public empList:any = [];

  constructor(private pageTitleService: PageHeadingService,private titleService: Title,private _empDetailService:ServicesComponent) { }

  ngOnInit() {
 this.titleService.setTitle( this.pageTitle );
this.pageTitleService.setPageHeader(this.pageHeadTitle);
      this._empDetailService.getDetails()

    .subscribe(empData => this.empList = empData)
   
  }


}

html strcture

 
<div class="widget box">
                <div class="widget-header"> <h4> Male Employee Details Filter With Custom Pipe</h4> </div>
                 <div class="widget-content">
<table class="table table-bordered">
   <thead>
    <tr>
      <th>#employee ID</th>
      <th>Name</th>
       <th>Gender</th>
    </tr>
  </thead>
  
       <ng-container *ngFor="let empLists of empList | filterdata : 'male'">
 <tr>
      <th>{{empLists.id}}</th>
       <th>{{empLists.fullName}}</th>
       <th>{{empLists.gender}}</th>
      
    </tr>
  </ng-container>
  </tbody>
</table>

                 </div>

When you open demo link go to the Employment Category (Child Component) tab after that click on male you will see only male data and for female only female employee data this is because of custom pipes.
Working demo of Router with parameter Demo Link

Leave a Reply

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