Search code examples
angularangular2-templateangular-pipe

Dynamically updating [checked] in Angular2

componentA.ts:

@Input() array;

<input type="checkbox" [checked]="array | contains: value"/>
<label>{{array.length}}</label>

componentB.ts:

@Component({
  selector: 'app-component-b',
  templateUrl: './app.component-b.html'
})
export class AppComponentB {
  array = [1, 2, 3];
}

I update array in some other components. While the label updates the array's length correctly, the check box doesn't seem to be updated. contains is just a simple pipe that checks if value is part of array. I put a console.log in the contains pipe and only got the output when the page renders at first, not when array is changed. Why is this?

Thanks..

Solution

  • That's because if you use push to add new item to array then the array reference isn't changed while pure pipe will be executed only when it detects a pure change to the input value (array and value in your case)

    There is two solutions:

    1) return new array

    this.array = this.array.concat(4)

    or 

    this.array = [...this.array, 4];

    Plunker

    2) use impure pipe

    @Pipe({name: 'contains', pure: false})
export class ContainsPipe implements PipeTransform {

    Plunker

    For more details see also