CODEWITHSUNDEEP
angular
Sahin Erbay
Sahin Erbay

Reputation: 1014

Angular 2: Scope of variable inside *ngFor

Is it possible to get the "items" from item-list and transfer to item-filter and use it inside that component such as using a service? 

<div class="container">
    <item-filter (testOut) = "retrieveMe($event)" ></item-filter>
    <div class="row">
    <item-list *ngFor = "let item of items | filter :   filterConditions" [storyInfo] = 'item'></item-list> 
    </div><!-- Row -->
</div><!-- Container-->

Upvotes: 1

Views: 778

Answers (1)

unitario
unitario

Reputation: 6535

Move the section from the pipe to the parent component, include a property for the filtered list and @Input that list into item-filter:

Parent component class:

items: any[] = [];
filteredItems: any[] = [];

retrieveMe(criteria: any): void {
  this.filteredItems = this.filter(items, criteria);
}

filter(items: any[], criteria: any): any[] {
  return // code from your pipe (input and output would be the same)
}

Parent template:

<div class="container">
  <item-filter (testOut)="retrieveMe($event)" [filteredItems]="filteredItems"></item-filter>
  <div class="row">
    <item-list *ngFor = "let item of filteredItems" [storyInfo] = 'item'></item-list> 
  </div><!-- Row -->
</div><!-- Container-->

item-filter component class:

import { ..., Input } from '@angular/core';

@Input() filteredItems: any[] // <- here's your filtered items list

Upvotes: 1

Related Questions