The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

Question

The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

The ngAfterViewInit lifecycle hook isn't triggered for a Component that is transcluded into another component using <ng-content>, as shown below:

<app-container [showContent]="showContentContainer">
    <app-input></app-input>
</app-container>

However, everything works fine without <ng-content>:

<app-input *ngIf="showContent"></app-input>

The container component is described as:

@Component({
  selector: 'app-container',
  template: `
        <ng-container *ngIf="showContent">
              <ng-content></ng-content>
        </ng-container>
  `
})
export class AppContainerComponent {
  @Input()
  showContentContainer = false;

  @Input()
  showContent = false;
}

The input component is defined as:

@Component({
  selector: 'app-input',
  template: `<input type=text #inputElem />`
})
export class AppInputComponent implements AfterViewInit {
  @ViewChild("inputElem")
  inputElem: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    console.info("ngAfterViewInit has been executed!");
    this.inputElem.nativeElement.focus();
  }
}

Check out a live example here: https://stackblitz.com/edit/angular-playground-vqhjuh

javascript angular typescript

Answer 1

Answer №1

There are a couple of key issues to address in this situation:

Child components are created when the parent component is instantiated, not when <ng-content> includes them (refer to https://github.com/angular/angular/issues/13921)
ngAfterViewInit does not signify that the component has been added to the DOM, only that the view has been initialized (check out https://github.com/angular/angular/issues/13925)

To solve this problem, one could address either or both of these issues:

Rewrite the container directive as a structural directive to create content only when necessary. An example can be found here: https://stackblitz.com/edit/angular-playground-mrcokp
Rework the input directive to respond to being actually attached to the DOM. One approach is to create a directive for this purpose. See an example here: https://stackblitz.com/edit/angular-playground-sthnbr

In many scenarios, it might be beneficial to tackle both of these aspects.

Nevertheless, dealing with option #2 can be simplified with a custom directive, which I will provide here for completeness:

@Directive({
    selector: "[attachedToDom],[detachedFromDom]"
})
export class AppDomAttachedDirective implements AfterViewChecked, OnDestroy {
  @Output()
  attachedToDom = new EventEmitter();

  @Output()
  detachedFromDom = new EventEmitter();

  constructor(
    private elemRef: ElementRef<HTMLElement>
  ) { }

  private wasAttached = false;

  private update() {
    const isAttached = document.contains(this.elemRef.nativeElement);

    if (this.wasAttached !== isAttached) {
      this.wasAttached = isAttached;

      if (isAttached) {
        this.attachedToDom.emit();
      } else {
        this.detachedFromDom.emit();
      }
    }
  }

    ngAfterViewChecked() { this.update(); }
  ngOnDestroy() { this.update(); }
}

It can be used like this:

<input type=text 
       (attachedToDom)="inputElem.focus()"
       #inputElem />

Answer 2

There are a couple of key issues to address in this situation:

Child components are created when the parent component is instantiated, not when <ng-content> includes them (refer to https://github.com/angular/angular/issues/13921)
ngAfterViewInit does not signify that the component has been added to the DOM, only that the view has been initialized (check out https://github.com/angular/angular/issues/13925)

To solve this problem, one could address either or both of these issues:

Rewrite the container directive as a structural directive to create content only when necessary. An example can be found here: https://stackblitz.com/edit/angular-playground-mrcokp
Rework the input directive to respond to being actually attached to the DOM. One approach is to create a directive for this purpose. See an example here: https://stackblitz.com/edit/angular-playground-sthnbr

In many scenarios, it might be beneficial to tackle both of these aspects.

Nevertheless, dealing with option #2 can be simplified with a custom directive, which I will provide here for completeness:

@Directive({
    selector: "[attachedToDom],[detachedFromDom]"
})
export class AppDomAttachedDirective implements AfterViewChecked, OnDestroy {
  @Output()
  attachedToDom = new EventEmitter();

  @Output()
  detachedFromDom = new EventEmitter();

  constructor(
    private elemRef: ElementRef<HTMLElement>
  ) { }

  private wasAttached = false;

  private update() {
    const isAttached = document.contains(this.elemRef.nativeElement);

    if (this.wasAttached !== isAttached) {
      this.wasAttached = isAttached;

      if (isAttached) {
        this.attachedToDom.emit();
      } else {
        this.detachedFromDom.emit();
      }
    }
  }

    ngAfterViewChecked() { this.update(); }
  ngOnDestroy() { this.update(); }
}

It can be used like this:

<input type=text 
       (attachedToDom)="inputElem.focus()"
       #inputElem />

Answer 3

Answer №2

Upon reviewing the console in your stackblitz, it becomes evident that the event is triggered even before any button is pressed. It seems that everything defined as <app-container> will be initialized or constructed at the point of declaration.

In the example provided, if you insert a test function within the app-container, it will be executed immediately. This means that <app-input> will also be constructed without delay. Since ngAfterViewInit is only called once according to Angular's lifecycle hooks (source: https://angular.io/guide/lifecycle-hooks), this initial call occurs at this stage.

It is worth noting that including the following code snippet inside the AppInputComponent may seem unconventional:

ngOnDestroy() {
    console.log('destroy')
}

This would result in the component being immediately destroyed and not initialized again (you can confirm by adding constructor or ngOnInit logs).

Answer 4

Upon reviewing the console in your stackblitz, it becomes evident that the event is triggered even before any button is pressed. It seems that everything defined as <app-container> will be initialized or constructed at the point of declaration.

In the example provided, if you insert a test function within the app-container, it will be executed immediately. This means that <app-input> will also be constructed without delay. Since ngAfterViewInit is only called once according to Angular's lifecycle hooks (source: https://angular.io/guide/lifecycle-hooks), this initial call occurs at this stage.

It is worth noting that including the following code snippet inside the AppInputComponent may seem unconventional:

ngOnDestroy() {
    console.log('destroy')
}

This would result in the component being immediately destroyed and not initialized again (you can confirm by adding constructor or ngOnInit logs).

The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

Answer №1

Answer №2

Similar questions

Adding data from a database into an object in PHP for temporary use during the loading process can be achieved by following

Updating a JavaScript global variable within a click event function: A quick guide

Next.js deployments on Vercel are encountering issues with resolving local fonts

Using AngularJS to bind to the 'src' property of an <img> tag

Using PHP to ascertain the requested dataType or responseType from the client

Discover how TypeScript's strictNullChecks feature can help you identify null values with ease in your functions

Incorporate an array into a JSON object using AngularJS

A guide to accurately fetching the transform properties of an SVG element within a d3.transition

Displaying content on the <div> element

Remove any errors as soon as the input field becomes valid

Differences between Array and Database Search

Sending data from a partial view to a controller

Steer clear of directly accessing views in AngularJS using angular-ui-router

Utilize a vanilla JavaScript object as the primary model in Ember

The Angular Library seems to be malfunctioning as it does not execute the ngOnInit

Tips for inserting a line break within the output of an Angular pipe

Monitoring and recording Ajax requests, and retrying them if they were unsuccessful

Using a combination of look-arounds and tag omission for advanced parsing

Is the validation for the 'prop' property missing in props?

Using Javascript to access a website from a Windows Store application