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>

      

enter image description here

And the subscription works well:

enter image description here

How do I get the updated value in the pipe?

Thank,

+3


source to share


1 answer


You have to remove the brackets and use the pipe parameter like this:



<div *ngFor="let team of teams | filterData: value">

      

+3


source







All Articles