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

Can you show where exactly array is defined? is it in service or component? — micronyks, Oct 09 '16 at 07:45
It's just a variable in a component. I added some code above. — 7ball, Oct 09 '16 at 07:50

score 3 · Accepted Answer · edited May 23 '17 at 12:09

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

Dynamically updating [checked] in Angular2

1 Answers1

Linked