The Last Guide For Angular Change Detection You'll Ever Need

[Mokkapps]

The Last Guide For Angular Change Detection You'll Ever Need

Hey 👋 @tag me to ask a question

[lenvaz]

if i detach a component from the view and use the "ngAfterContentChecked", "ngAfterViewChecked" to check if they get called on any external button click event. Then will these hooks be called ?

@Mokkapps

[lenvaz]

Hey @maxkoretskyi

did you get any point in the code that might be forcing triggering the hooks even in detach mode?

[maxkoretskyi]

can you create a minimal example on stackblitz?

[lenvaz]

Yes sure, this is the link to it:
Issue Recreation

[maxkoretskyi]

Yeah, hooks run, but change detection still doesn't run for detached component. You can change the property and the change won't be reflected in the view even if you click run change detection button. Only once you attach it, the view is updated. The hooks are called because for child components they are executed when running change detection for a parent component, and Angular runs change detection for AppComponent. Read more here. Check here

export class HelloComponent {

  ngOnInit(): void {
    console.log('HelloComponent : ngOnInit');
    setTimeout(() => {
      this.cdr.detach();
    }); // View Detached Here

    setTimeout(() => {
      console.log('changed');  <------------ won't be reflected in the view
      this.name = 'changed';
    }, 2000);

[lenvaz]

Ok so it optimises the DOM refresh by not doing any changes there but does notify the component about the content and its view being checked. I was in an impression for complete isolation from the view. (do not disturb kind of detach). So Ivy has introduced i suppose and kind of good in terms of notification to the component but bad in terms of actually detaching it from the CD cycle.