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
– Akxe, Commented Oct 11, 2020 at 23:44
How do you pass a new object to the child? It is passed in through the template. — John Zimmerman
– John Zimmerman, Commented Oct 11, 2020 at 23:55

raina77ow · Accepted Answer · 2020-10-12 00:15:37Z

1

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);
}

edited Oct 12, 2020 at 0:15

answered Oct 12, 2020 at 0:00

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular updating child component input from parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related