Dynamically updating [checked] in Angular2

Question

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..

Answer 1

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

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5
• https://angular.io/docs/ts/latest/guide/pipes.html