Angular Change Detection On Push

Question

I am trying to invoice change detection on the changing params page. After that, I get recipe JSON from DB. Why my code doesn't invoice component change detection when I create a new Subscription in the ngOnInit?

import {
  Component,
  OnInit,
  OnDestroy,
  ChangeDetectionStrategy,
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription, switchMap } from 'rxjs';
import { RecipesApiService } from '../../../services/recipes/recipes-api.service';
import { IRecipeApi } from '../../../services/recipes/recipes';

@Component({
  selector: 'app-recipe-page',
  templateUrl: './recipe-page.component.html',
  styleUrls: ['./recipe-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RecipePageComponent implements OnInit, OnDestroy {
  recipe!: IRecipeApi;
  private sub$!: Subscription;

  constructor(
    private route: ActivatedRoute,
    private recipesApiService: RecipesApiService
  ) {}

  ngOnInit(): void {
    this.sub$ = this.route.params
      .pipe(
        switchMap((params) => {
          return this.recipesApiService.getRecipeApiById(params['id']);
        })
      )
      .subscribe((recipe) => {
        this.recipe = recipe;
      });
  }

  ngOnDestroy() {
    this.sub$.unsubscribe();
  }
}

Would be nice to see your template. However, you can manually execute change detection injecting ChangeDetectorRef in your constructor and using it like this.cd.detectChanges(); — Pedro Bezanilla
– Pedro Bezanilla, Commented May 27, 2022 at 10:12

TotallyNewb · Accepted Answer · 2022-05-27 09:14:17Z

1

Why would it? With ChangeDetectionStrategy.OnPush you have to manually invoke change detection. That's the whole point of using it. In your code you don't do so, hence the change detection is not invoked.

Read more about change detection in the official docs here, or refer to one of the multiple tutorials available on the web.

answered May 27, 2022 at 9:14

TotallyNewb

4,8701 gold badge16 silver badges22 bronze badges

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

5 Comments

Vlad_Gesin Over a year ago

Yes I know it, the question is how can I invoke it?

Vlad_Gesin Over a year ago

Why does the Subscription won't invoke it?

TotallyNewb Over a year ago

Everything is explained in the linked docs, even with an example. You inject the ChangeDetectorRef in the constructor, and call .markForCheck() when you want to run change detection - in your case inside the subscription, after you updated the value of this.recipe.

Vlad_Gesin Over a year ago

I thought the sub$ will invoke it.. well i got wrong about it.

Aditi Over a year ago

The documentation is something publicly available and anyone who reads it, might get more doubts hence the question was asked.this answer is not simplying it,just linking resources

Collectives™ on Stack Overflow

Angular Change Detection On Push

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related