CODEWITHSUNDEEP
angularjsangular
Aaron Balthaser
Aaron Balthaser

Reputation: 2622

Binding to Component Property inside ngFor

I have a filter component that is completely separated 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 into the pipe using the 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 within the component and is simple. However what I am trying to do is have the input live inside its own component as it will be reused for various 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 card and am able to get the values typed into the filter input field. I cannot figure out how to get those values passed into the pipe.

Inside the component I have the values being stored in a property as follows:

ngOnInit() {
  this.sub = this.search.getChangeEvent()
    .subscribe((value) => {
      this.value = value;
    }
  );
}

I cannot figure out how to pass the value into the pipe. I have tried to bind the property inside the ngFor as follows but it does not work

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

When I update the code as follows I get the error below:

<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 can I get the updated value into the pipe?

Thanks,

Upvotes: 4

Views: 927

Answers (1)

eko
eko

Reputation: 40647

You should remove the brackets and use the pipe parameter like this:

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

Upvotes: 3

Related Questions