Change Detection Strategy onpush not working

Question

Parent.component.html

<app-child [activeUser]="activeUser"  *ngIf="eceConfirm && activeUser"></app-child>

Parent.component.ts In ngOnInit I called getAllEmployees to get all the employee data and passed 0th index data to the child component using @Input() activeUser.

 getAllEmployees() {
    this.service
      .getCommonEmployeesDetail(this.user["uid"], this.selectedRatingCycleId)
      .subscribe((res) => {
        this.userList = res;
        this.changeUser(this.userList[0]);
      });
  }

  changeUser(user) {
    console.log("user", user);
    this.activeUser=user;
  }

Child.component.ts

I have implemented changeDetection.Onpush strategy in my child component. After getting my activeUser data I am passing it in the changeChildUser() method to fetch data from a request and assigning it to the this.cycleData.

The problem which I am facing 1.When I try to print {{cycleData.Englishmarks}} in HTML page doesn't get refreshed. I consoled this.cycleData and it was displaying the value in the console.

Any idea what might be the problem.Any input is appreciated.Thanks in advance

 @Input() activeUser: BpuData;

ngOnChanges(changes: SimpleChanges) {
this.changeChildUser();
}



changeChildUser() {
    this.chapterService.getcycle(this.activeUser).subscribe(response =>{
         this.cycleData=response;
});  
      }

Use the async pipe. Try to avoid using `subscribe` since you don't have to remember to unsubscribe. FYI you have a memory leak here. — Maxime Gélinas, Nov 23 '20 at 12:46

score 2 · Accepted Answer · answered Nov 23 '20 at 12:52

2

That's because detection is changed only when an input is changed in the OnPush components.

You have to either detect changed manually:

changeChildUser() {
    this.chapterService.getcycle(this.activeUser).subscribe(response =>{
         this.cycleData=response;
         this.cdr.detectChanges();
    });  
}

Or you async pipe as @Maxime already commented.

PS: Always remember to unsubscribe on the destroy.

answered Nov 23 '20 at 12:52

StPaulis

2,844
1
14
24

suppose let's say I add similar functions like changeChildUser().In each function can I call this.cdr.detectChanges();Is it a good practice? – mohammed fahimullah Nov 23 '20 at 13:00
Yes you can, I believe that this is a good practice since it will check the changes only in the child component that is what you need. If you have several components inside your child component you should be aware of performance issues. But be aware that `MarkForCheck` will not invoke detection. Only if a parent invoke then your component will be changed. – StPaulis Nov 23 '20 at 14:51

Muhammet Can TONBUL · Answer 2 · 2020-11-23T13:08:13.727

The best solution for OnPush components is to use markForCheck(). detectChanges() also solves the problem, but it can create a performance problem since it triggers other components in the tree.

https://angular.io/api/core/ChangeDetectorRef#markForCheck

constructor(private cd: ChangeDetectorRef) {}

this.chapterService.getcycle(this.activeUser).subscribe(response => {
  this.cycleData = response;
  this.cd.markForCheck();
});

I prepared an example close to your project.

https://stackblitz.com/edit/angular-ivy-duuj5y

If you want to understand exactly what happened, here's a very good explanation.

https://stackoverflow.com/a/41364469/6478359

Change Detection Strategy onpush not working

2 Answers2