angular - pipe inside child component not called when input changed -

i have custom pipe filter array. pipe used inside child component, data child component passed through input parameter. when input data changed, pipe not called. there have differently when using changedetectionstrategy.onpush inside child component.

edit

in example below, product-list-container gets products ngrx store. data passed product-list component through input parameter.

in product-list component, have filter filtering out rows based on criteria. issue seeing that, when input value changes pipe function not called. pipe getting called once on component load.

@component({   selector: 'product-list-container',   template: `     <app-product-list [productlist]="productlist$ | async"></app-product-list>   ` }) export default class productlistcontainer implements oninit {   public productlist$: observable<product[]>;   constructor(public store: store<appstate>) {   }   ngoninit() {     this.productlist$ = this.store.select('productlist');   } }  @component({   selector: 'app-product-list',   template: `     <div *ngfor="let product of productlist | filteractiveproduct">    // more code here      </div>   `,   changedetection: changedetectionstrategy.onpush }) export default class productlist {   @input() productlist: product[];   constructor() {   } }  @pipe({   name: 'fromnow' }) export class filteractiveproduct {   transform(products: product[], args: array<any>): string {     return products.findall(p => p.isactive);   } } 

thanks,

that because pipe pure pipes.

angular executes pure pipe when detects pure change input value. pure change either change primitive input value (string, number, boolean, symbol) or changed object reference (date, array, function, object).

angular ignores changes within (composite) objects. won't call pure pipe if change input month, add input array, or update input object property.

using impure pipes in case:

angular executes impure pipe during every component change detection cycle. impure pipe called lot, every keystroke or mouse-move.

with concern in mind, must implement impure pipe great care. expensive, long-running pipe destroy user experience.

filteractiveproduct:

@pipe({   name: 'filteractiveproduct',   pure: false }) export class filteractiveproduct {} 

productlist:

@component({   selector: 'app-product-list',   template: `     <div *ngfor="let product of productlist | filteractiveproduct">    // more code here      </div>   `, }) export default class productlist {   @input() productlist: product[];   constructor() {   } } 

following document page: https://angular.io/docs/ts/latest/guide/pipes.html