Linking to a component inside ngFor
I have a filter component that is completely decoupled from the views that contain the data I am iterating over. I can get the filter pipe to work in the following scenario when I pass the value to the pipe using an input element reference:
<div class="card-subject">
<input type="text" #filter (keyup)="0">
<div *ngFor="let team of teams | filterData: filter.value">
<h2>{{ team.name }}</h2>
<h2>{{ team.num }}</h2>
</div>
</div>
In the above case, the input element lives inside the component and is simple. However, what I am trying to do is that the input is embedded in its own component as it will be reused for different types of cards.
<card-directory-search-bar></card-directory-search-bar>
<div class="card-subject">
<div *ngFor="let team of teams | filterData: filter.value">
<h2>{{ team.name }}</h2>
<h2>{{ team.num }}</h2>
</div>
</div>
I have subscribed to an observable inside the map and can get the values entered in the filter input field. I cannot figure out how to get these values passed to the pipe.
Inside the component, I have values stored in a property:
ngOnInit() {
this.sub = this.search.getChangeEvent()
.subscribe((value) => {
this.value = value;
}
);
}
I cannot figure out how to pass the value to the pipe. I tried to bind a property inside ngFor as follows, but it doesn't work
<div *ngFor="let team of teams | filterData: {value}">
When I update the code like this, I get the following error:
<card-directory-search-bar></card-directory-search-bar>
<div class="card-subject">
<div *ngFor="let team of teams | filterData: {value}">
<h2>{{ team.name }}</h2>
<h2>{{ team.num }}</h2>
</div>
</div>
And the subscription works well:
How do I get the updated value in the pipe?
Thank,
source to share