Angular updating child component input from parent component

Question

How do you initiate change detection on a child component from the parent if the change detection is set to OnPush? The array of objects are maintained in the parent component and for my case the change to the child value (item in the array) is initiated from the parent.

app.component.html:

<ul>
  <li *ngFor="let item of items">
    <button mat-button (click)="onClickMe(item)">Basic</button>
    <hello [item]=item></hello>
  </li>
</ul>

app.component.ts (relevant part):

export class AppComponent  {
  items: Item[] = [];
  constructor() {
    let i: number = 0;
    for (i=0; i<10; i++) {
      let tmps: ItemTmp[] = [];
      for (let j=0; j<10; j++) {
        tmps.push({
          value: ("tmp_" + j),
          selected: true
        });
      }
      this.items.push({
        id: i,
        name: ("item_" + i),
        tmps: tmps
      });
    }
  }

  onClickMe(item: Item): void {
    item.tmps[0].selected = !item.tmps[0].selected;
    console.log(item.tmps[0].selected);
  }
}

hello.component.ts:

@Component({
  selector: 'hello',
  template: `
    <h1>{{item.id}} - {{item.name}}</h1>
    <li *ngFor="let tmp of item.tmps">
    {{tmp.value}} - {{tmp.selected}}
    </li>
  `,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent {

  @Input() item: Item;

}

I have created an example project showing my question.

https://stackblitz.com/edit/angular-ivy-7v5pef?file=src/app/app.component.html

In this example, I need for the value in the child object to update on the screen. I can see in the console that the object in the array in the parent is updating as I would expect. But the child component is not changing.

You need to pass a new object to child. OnPush means that if the child have same object (by reference) it will not do detection — Akxe
How do you pass a new object to the child? It is passed in through the template. — John Zimmerman

raina77ow raina77ow · Accepted Answer · 2020-10-12T00:00:12

OnPush means checking reference, not value. Unless parent starts passing a new reference of item into a child, nothing gets tracked there. One way of dealing with this is changing onClickMe function so that instead of modifying item value, it starts modifying items collection, injecting a new object there. Like this:

<button mat-button (click)="onClickMe(i)">Basic</button>

// in .ts
onClickMe(i: number): void {
  const item = this.items[i];
  this.items[i] = { ...item };
  // you can do this in-place now, as a new reference is already created
  this.items[i].tmps[0].selected = !this.items[i].tmps[0].selected;
  console.log(item.tmps[0].selected);
}

Angular updating child component input from parent component

1 Answers