Home > Back-end >  Angular 13 - When create an embedded View?
Angular 13 - When create an embedded View?

Time:07-18

I'm learning TemplateRef and ViewContainerRef concepts in Angular 13.3.0.

My component template is very simple:

<ng-container #container></ng-container>

<ng-template #templ let-item="name">
    Example {{name}}
</ng-template>

In the component code:

export class MyComponent implements OnInit {

  @ViewChild("container", {read: ViewContainerRef})
  container!: ViewContainerRef;

  @ViewChild("templ", {read: TemplateRef})
  templ!: TemplateRef<any>;

  constructor() { }

  ngAfterViewInit() {
    this.container.createEmbeddedView(this.templ, { name: "John" });
  }
}

But I get the runtime error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'John'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook?. Find more at https://angular.io/errors/NG0100

What is the correct hook method in which call createEmbeddedView(...) and why is that? I've already tried ngOnInit and ngAfterContentInit

Thanks

CodePudding user response:

You should use ngAfterViewInit, and then call this.cd.detectChanges() to update the view after creating the embedded component

cd is a reference to ChangeDetectorRef which you can inject in the constructor

Angular details on ViewChild instantiation and lifecycle hooks

  • Related