Filter in ngFor after user click : Anguar 6
0
Just a quick question here. I'm still a newbie in angular so please. And yes, I have my view page looks something like this.
Initially, i'm loading my page with all the required data. Now, the problem here is, when the user clicks on any of the name in "OWNERS", the data should be able to filter based on "user-click". For example, if the user click on "Krishna" all the campaigns associated with "Krishna" should be filtered and should be able to display in the same page.
My home.component.ts page looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}And my home.component.html looks like this:
<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> I tried writing the (click) ="someMethod(campaign.Name)" for the button and passed campaign object and tried applying filter there in component.ts page, but no luck. Any help is much appreciated. Much thanks in advance.
P.S: This is after some research and after implementing the below suggestion.
I tried implementing a custom pipe, but after click event on owners, i'm getting the following error.
For Information: My debugging value of the pipe after click event looks like this.
My pipe Looks like this.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}And my click event and html looks like this:
filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>html
angular typescript angular6 asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
add a comment |
0
Just a quick question here. I'm still a newbie in angular so please. And yes, I have my view page looks something like this.
Initially, i'm loading my page with all the required data. Now, the problem here is, when the user clicks on any of the name in "OWNERS", the data should be able to filter based on "user-click". For example, if the user click on "Krishna" all the campaigns associated with "Krishna" should be filtered and should be able to display in the same page.
My home.component.ts page looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}And my home.component.html looks like this:
<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> I tried writing the (click) ="someMethod(campaign.Name)" for the button and passed campaign object and tried applying filter there in component.ts page, but no luck. Any help is much appreciated. Much thanks in advance.
P.S: This is after some research and after implementing the below suggestion.
I tried implementing a custom pipe, but after click event on owners, i'm getting the following error.
For Information: My debugging value of the pipe after click event looks like this.
My pipe Looks like this.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}And my click event and html looks like this:
filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>html
angular typescript angular6 asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28
add a comment |
0
0
0
1
Just a quick question here. I'm still a newbie in angular so please. And yes, I have my view page looks something like this.
Initially, i'm loading my page with all the required data. Now, the problem here is, when the user clicks on any of the name in "OWNERS", the data should be able to filter based on "user-click". For example, if the user click on "Krishna" all the campaigns associated with "Krishna" should be filtered and should be able to display in the same page.
My home.component.ts page looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}And my home.component.html looks like this:
<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> I tried writing the (click) ="someMethod(campaign.Name)" for the button and passed campaign object and tried applying filter there in component.ts page, but no luck. Any help is much appreciated. Much thanks in advance.
P.S: This is after some research and after implementing the below suggestion.
I tried implementing a custom pipe, but after click event on owners, i'm getting the following error.
For Information: My debugging value of the pipe after click event looks like this.
My pipe Looks like this.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}And my click event and html looks like this:
filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>html
angular typescript angular6 asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
Just a quick question here. I'm still a newbie in angular so please. And yes, I have my view page looks something like this.
Initially, i'm loading my page with all the required data. Now, the problem here is, when the user clicks on any of the name in "OWNERS", the data should be able to filter based on "user-click". For example, if the user click on "Krishna" all the campaigns associated with "Krishna" should be filtered and should be able to display in the same page.
My home.component.ts page looks like this.
import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}And my home.component.html looks like this:
<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> I tried writing the (click) ="someMethod(campaign.Name)" for the button and passed campaign object and tried applying filter there in component.ts page, but no luck. Any help is much appreciated. Much thanks in advance.
P.S: This is after some research and after implementing the below suggestion.
I tried implementing a custom pipe, but after click event on owners, i'm getting the following error.
For Information: My debugging value of the pipe after click event looks like this.
My pipe Looks like this.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}And my click event and html looks like this:
filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}import { CampaignService } from './../../../services/campaign.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private campaignService : CampaignService ) { }
Time;
campaigns;
ngOnInit(){
setInterval(() => {
this.Time = Date.now()
}, 1000);
this.campaignService.CampaignsInfo()
.subscribe(response=>{
this.campaigns = response;
});
}
}<campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> <campaign-header></campaign-header>
<div class="container-fluid date-time sticky-top">
<div class="container">
<form class="form-inline my-2 my-lg-0 d-flex justify-content-center radio" >
<div class="" >
<input type="radio" checked name="day"> Today
</div>
<div class="float-left">
<input type="radio" name="day"> Commulative
</div>
<!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>-->
</form>
<div class="d-flex justify-content-end" style="margin-top: -16px;">
<span id="date_time"><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> {{Time | date}} <i class="zmdi zmdi-time zmdi-hc-fw"></i> {{ Time | date:'mediumTime' }} </span>
</div>
</div>
</div>
<br>
<!-- content -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card campaign border-top wrap">
<div class="card-body table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="border-top-0">CAMPAIGN </th>
<th class="border-top-0">STATUS</th>
<th class="border-top-0">DIALED</th>
<th class="border-top-0">OWNERS</th>
<th class="border-top-0"> <span class="invisible">Action</span></th>
<!-- <button mat-button color="primary" routerLink="/campaign-details">CampaignDetails</button> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let campaign of campaigns?.result">
<td><p>{{campaign.CampaignName}}</p>
<small>{{campaign.DepartmentName}}</small>
</td>
<td>
<small class="text-info">Active</small>
</td>
<td>
<p>{{campaign.Dialed}} / <small>1500000</small></p>
<div class="progress mt-2 w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<button class="badge badge-pill badge-secondary" > {{ campaign.owners }} </button>
</td>
<td class="ml-0 pl-0"><a routerLink="/campaign-details"><img src="../../assets/Images/next.png" class="next" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
</div> import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!value) {
return values;
}
return values.filter(val =>{
debugger;
console.log(values);
return val.includes(values);
});
}
}filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>filterByOwnr(val) {
this.filter = val;
}<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : filter;">
<td>
<button class="badge badge-pill badge-secondary" (click)="filterByOwnr(campaign.owner)"> {{ campaign.owner}} </button>
</td>
</tr>html
angular typescript angular6 html
angular typescript angular6 asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
edited Nov 26 '18 at 11:39
Prudhvi Bharadwaj
asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
asked Nov 26 '18 at 5:13
Prudhvi BharadwajPrudhvi Bharadwaj
309
309
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28
add a comment |
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28
add a comment |
2 Answers
2
active
oldest
votes
1
In your custom pipe implementation, shouldn't this line:
return val.includes(values);
Be this instead?
return val.CampaignName.includes(value);
answered Nov 26 '18 at 11:30
ChronusChronus
9611
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
add a comment |
3
Implement custom filter pipe. Note modify custom pipe as per your need.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!key|| !value) {
return values;
}
return values.filter(val=>
val[key].toLowerCase().includes(value.toLowerCase())
);
}
}
import { Filter } from 'filterPipe';
@NgModule({
imports: ,
declarations: [ Filter ],
providers: [ ],
exports: [
Filter
],
})
export class PipeModule {}
//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';
@NgModule({
imports: [PipeModule
],
declarations: [
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
Home HTML
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
<td class="text-left">
<span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
</td>
filterByOwnr(val){
this.searchVal = val;
}
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475082%2ffilter-in-ngfor-after-user-click-anguar-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
In your custom pipe implementation, shouldn't this line:
return val.includes(values);
Be this instead?
return val.CampaignName.includes(value);
answered Nov 26 '18 at 11:30
ChronusChronus
9611
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
add a comment |
1
In your custom pipe implementation, shouldn't this line:
return val.includes(values);
Be this instead?
return val.CampaignName.includes(value);
answered Nov 26 '18 at 11:30
ChronusChronus
9611
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
add a comment |
1
1
1
In your custom pipe implementation, shouldn't this line:
return val.includes(values);
Be this instead?
return val.CampaignName.includes(value);
answered Nov 26 '18 at 11:30
ChronusChronus
9611
In your custom pipe implementation, shouldn't this line:
return val.includes(values);
Be this instead?
return val.CampaignName.includes(value);
answered Nov 26 '18 at 11:30
ChronusChronus
9611
edited Nov 26 '18 at 12:02
answered Nov 26 '18 at 11:30
ChronusChronus
9611
answered Nov 26 '18 at 11:30
ChronusChronus
9611
answered Nov 26 '18 at 11:30
ChronusChronus
9611
9611
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
add a comment |
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Sir, still the same issue.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:37
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Try return val.CampaignName.includes(value);
– Chronus
Nov 26 '18 at 11:41
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Sir, you saved me, thank you. I was struggling with this code for the past 2 days. Appreciate your effort. _/_
– Prudhvi Bharadwaj
Nov 26 '18 at 12:00
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
Glad I could help. I'll update my answer with the correct line, for future reference.
– Chronus
Nov 26 '18 at 12:02
add a comment |
3
Implement custom filter pipe. Note modify custom pipe as per your need.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!key|| !value) {
return values;
}
return values.filter(val=>
val[key].toLowerCase().includes(value.toLowerCase())
);
}
}
import { Filter } from 'filterPipe';
@NgModule({
imports: ,
declarations: [ Filter ],
providers: [ ],
exports: [
Filter
],
})
export class PipeModule {}
//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';
@NgModule({
imports: [PipeModule
],
declarations: [
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
Home HTML
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
<td class="text-left">
<span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
</td>
filterByOwnr(val){
this.searchVal = val;
}
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
add a comment |
3
Implement custom filter pipe. Note modify custom pipe as per your need.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!key|| !value) {
return values;
}
return values.filter(val=>
val[key].toLowerCase().includes(value.toLowerCase())
);
}
}
import { Filter } from 'filterPipe';
@NgModule({
imports: ,
declarations: [ Filter ],
providers: [ ],
exports: [
Filter
],
})
export class PipeModule {}
//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';
@NgModule({
imports: [PipeModule
],
declarations: [
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
Home HTML
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
<td class="text-left">
<span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
</td>
filterByOwnr(val){
this.searchVal = val;
}
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
add a comment |
3
3
3
Implement custom filter pipe. Note modify custom pipe as per your need.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!key|| !value) {
return values;
}
return values.filter(val=>
val[key].toLowerCase().includes(value.toLowerCase())
);
}
}
import { Filter } from 'filterPipe';
@NgModule({
imports: ,
declarations: [ Filter ],
providers: [ ],
exports: [
Filter
],
})
export class PipeModule {}
//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';
@NgModule({
imports: [PipeModule
],
declarations: [
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
Home HTML
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
<td class="text-left">
<span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
</td>
filterByOwnr(val){
this.searchVal = val;
}
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
Implement custom filter pipe. Note modify custom pipe as per your need.
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class Filter implements PipeTransform {
transform(values: any, key: string, value: string): any {
if (!values) {
return ;
}
if (!key|| !value) {
return values;
}
return values.filter(val=>
val[key].toLowerCase().includes(value.toLowerCase())
);
}
}
import { Filter } from 'filterPipe';
@NgModule({
imports: ,
declarations: [ Filter ],
providers: [ ],
exports: [
Filter
],
})
export class PipeModule {}
//App module
import { NgModule } from '@angular/core';
import { PipeModule } from './modules/pipe.module';
@NgModule({
imports: [PipeModule
],
declarations: [
],
providers: [
],
bootstrap: [AppComponent],
})
export class AppModule {}
Home HTML
<tr *ngFor="let campaign of campaigns?.result | filter : 'OWNERS' : searchVal;">
<td class="text-left">
<span (click)="filterByOwnr(campaign.OWNERS)">{{campaign.OWNERS}}</span>
</td>
filterByOwnr(val){
this.searchVal = val;
}
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
edited Nov 26 '18 at 12:07
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
answered Nov 26 '18 at 6:07
Manikandan VelayuthamManikandan Velayutham
1,7301918
1,7301918
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
add a comment |
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
Sir, i'm getting the following error " ** Cannot find name 'field'. [2304] ** " in my custom pipe.
– Prudhvi Bharadwaj
Nov 26 '18 at 10:55
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
change [filed] to [key]..
– Manikandan Velayutham
Nov 26 '18 at 12:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475082%2ffilter-in-ngfor-after-user-click-anguar-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please post the code of "someMethod()" which you are calling on click event.
– Akshay Kapoor
Nov 26 '18 at 5:37
@AkshayKapoor Sir, Can you please check now.
– Prudhvi Bharadwaj
Nov 26 '18 at 11:28