Monday 26 December 2016

NG2-Two way data binding - Searc Text Filter list of item in Array

NG2-Two way data binding - Searc Text Filter list of item in Array
============================================
Template.html
-------------

<div class="panel-default">
<div class="panel-heading">All list Data
<div>
<input [ngModel]="sectionSearch" (ngModelChange)="onSearchSection($event)" class="sidesearch" placeholder="Search...">
</div>
</div>
<div class="panel-body allDataList">
<div *ngFor="let item of alldata" routerLinkActive="active"><a routerLink="DomainSecondURL/{{item.displayName}}">{{item.displayName}}</a>
</div>
</div>
</div>


Component.ts
-------------

import {Component,ViewContainerRef,ViewEncapsulation, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { FormControl } from '@angular/forms';

@Component({
selector:'template',
template:require('./template.html')
})

export class FilterData{

public allData:any;
public filterData:any;


constructor(private route:ActivatedRoute,private allDataService:AllDataService, private router: Router){
this.url = router.url.split('/');
this.AllDataService.getleftmenuData(this.url)  
.subscribe(
(data:any)=>{    

this.allData= data.sections;
this.filterData = this.allData;

},
(error:any)=>{
console.log("error");
}
);      
}
onSearchSection(event:Event) {

this.allData = this.filterData.filter(
section => section.displayName.toLocaleLowerCase().indexOf(event) >= 0

// {section => Obj.propeName - displayName}
);

}

}

No comments:

Post a Comment