Execute a function following the completion of rendering the ViewChild

Question

Execute a function following the completion of rendering the ViewChild

My template includes the following:

@Component({
  standalone: true,
  imports: [DynamicFormComponent, NgForOf, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet],
  template: `
  <ng-container [ngSwitch]="method">
    <ng-container *ngSwitchCase="file">
      <ng-container *ngIf="!isFileUploaded; else form">
        ...some html...
      </ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="manual">
      <ng-container *ngTemplateOutlet="form"></ng-container>
    </ng-container>
  </ng-container>

<ng-template #form>
  <app-dynamic-form></app-dynamic-form>
</ng-template>
`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(DynamicFormComponent, { static: false })
  public form!: DynamicFormComponent;

  private createForm(): void {
    // method to run after DynamicFormComponent render...
    const fields: any[] = this.createFields();
    this.form.setFields(fields);
  }

  createFields(): any[] {
    return [/*fields...*/]
  }
}

I am trying to set a variable inside <app-dynamic-form> using its setFields() method.

export class DynamicFormComponent {
  public fields: any[];

  public setFields(val: any[]): void {
    if (val) {
      this.fields = val;
    }
  }
}

An issue arises when this component is rendered later via ng-template than when the parent is initialized. I have attempted to do it in ngAfterViewInit() without success, and also tried emitting the event in ngOnInit() with no luck either.

angular typescript

Answer 1

Answer №1

If you want to trigger an event when DynamicFormComponent initializes, you can use the code snippet below:

export class DynamicFormComponent {
  public fields: any[];

  @Output() onInit: EventEmitter<boolean> = new EventEmitter<boolean>();

  ngOnInit() {
    this.onInit.emit(true);
  }

  public setFields(val: any[]): void {
    if (val) {
      this.fields = val;
    }
  }
}

To bind the create form method with the initialization event, you can include the following code:

<app-dynamic-form (onInit)="createForm()" ></app-dynamic-form>

Answer 2

If you want to trigger an event when DynamicFormComponent initializes, you can use the code snippet below:

export class DynamicFormComponent {
  public fields: any[];

  @Output() onInit: EventEmitter<boolean> = new EventEmitter<boolean>();

  ngOnInit() {
    this.onInit.emit(true);
  }

  public setFields(val: any[]): void {
    if (val) {
      this.fields = val;
    }
  }
}

To bind the create form method with the initialization event, you can include the following code:

<app-dynamic-form (onInit)="createForm()" ></app-dynamic-form>

Answer 3

Answer №2

There are two methods to achieve this:

Utilize output in your app-dynamic-form component. It is important to consider the following points with this approach:

You must trigger the event emitter asynchronously from the child to avoid potential errors such as
```
ExpressionChangedAfterItHasBeenCheckedError
```
. This occurs because Angular follows a unidirectional change detection flow from parent to child. If you emit sync during this process, the state might change in the parent before it has been checked by Angular, leading to inconsistencies in rendering.
To ensure that your ViewChild is captured by the parent, you can either opt for an async output as mentioned above (which allows the parent to catch the event once the ViewChild is defined), or use an output handler with a hook like ngAfterViewChecked to capture the ViewChild.

Using async output effectively addresses both issues:

app-dynamic-form:

@Output() init = new EventEmitter<void>(true); // true ensures that the eventemitter triggers asynchronously in the next event loop tick

ngOnInit(): void {
  this.init.emit();
}

Following this, you should be able to capture the initialization event in the parent and have it defined in the ViewChild property.

The other method is a bit more complex but serves as an alternative - there is no need to add outputs, etc., but instead, handle changes of ViewChild using the ngAfterViewChecked hook:

parent:

@ViewChild(DynamicFormComponent, { static: false })
  public form!: DynamicFormComponent;
private childInited = false;

ngAfterViewChecked(): void {
  if(!this.childInited && this.form) {    
    this.childInited = true; // to prevent triggering in the next change detection cycle
    setTimeout(() => this.onDynamicFormInited());
  }
  else if(!this.form) { // handle the scenario when the form was present but then hidden by ngIf 
    this.childInited = false;
  }
}

private onDynamicFormInited(): void {
  ...
}

Note: Use setTimeout when making state changes (properties used in the template) to avoid expression changed errors during change detection.

Additionally, since your component utilizes OnPush, make sure to include markForCheck to ensure that setTimeout state changes are reflected in the re-rendering process.

Answer 4

There are two methods to achieve this:

Utilize output in your app-dynamic-form component. It is important to consider the following points with this approach:

You must trigger the event emitter asynchronously from the child to avoid potential errors such as
```
ExpressionChangedAfterItHasBeenCheckedError
```
. This occurs because Angular follows a unidirectional change detection flow from parent to child. If you emit sync during this process, the state might change in the parent before it has been checked by Angular, leading to inconsistencies in rendering.
To ensure that your ViewChild is captured by the parent, you can either opt for an async output as mentioned above (which allows the parent to catch the event once the ViewChild is defined), or use an output handler with a hook like ngAfterViewChecked to capture the ViewChild.

Using async output effectively addresses both issues:

app-dynamic-form:

@Output() init = new EventEmitter<void>(true); // true ensures that the eventemitter triggers asynchronously in the next event loop tick

ngOnInit(): void {
  this.init.emit();
}

Following this, you should be able to capture the initialization event in the parent and have it defined in the ViewChild property.

The other method is a bit more complex but serves as an alternative - there is no need to add outputs, etc., but instead, handle changes of ViewChild using the ngAfterViewChecked hook:

parent:

@ViewChild(DynamicFormComponent, { static: false })
  public form!: DynamicFormComponent;
private childInited = false;

ngAfterViewChecked(): void {
  if(!this.childInited && this.form) {    
    this.childInited = true; // to prevent triggering in the next change detection cycle
    setTimeout(() => this.onDynamicFormInited());
  }
  else if(!this.form) { // handle the scenario when the form was present but then hidden by ngIf 
    this.childInited = false;
  }
}

private onDynamicFormInited(): void {
  ...
}

Note: Use setTimeout when making state changes (properties used in the template) to avoid expression changed errors during change detection.

Additionally, since your component utilizes OnPush, make sure to include markForCheck to ensure that setTimeout state changes are reflected in the re-rendering process.

Execute a function following the completion of rendering the ViewChild

Answer №1

Answer №2

Similar questions

Struggling to fetch a DropDown menu from an Array in ReactJS

Is it possible to trigger this Angular function upon page load?

How do I retrieve the value of a dxi-item in TypeScript with Angular and Devextreme?

Utilizing React Hooks efficiently with JSDoc annotations and destructuring arrays

Creating an array of objects in Angular 2

I am encountering issues with the TypeScript repository build on my local machine, but it successfully passes when

Tips for navigating the material ui Expanded attribute within the Expansion Panel

Executing several Angular applications on a shared Node server

Tips for avoiding the <p> and <br> elements while using a ContentEditable div

Is it acceptable to use JavaScript files in the pages directory in NEXTJS13, or is it strongly advised to only use TypeScript files in the most recent version?

What is the method for executing a custom command within the scope of a tree view item?

The React Provider values in Typescript are not compatible with each other

What is the process for including a resource parameter in the acquireTokenSilent method of an MSAL instance within an Angular application?

Tips for implementing type safety in a generic class to verify that the response type aligns with the anticipated type in TypeScript

Tips for successfully sending an API request using tRPC and NextJS without encountering an error related to invalid hook calls

Expanding TypeScript Definitions

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

A guide on incorporating a JavaScript plugin using Vue.use() into a TypeScript project equipped with typings

Setting up Emotion js in a React TypeScript project using Vite 4

Showcasing an Angular Material Dialog following a delay of x seconds