Angular Portal cdkPortal directive throw Expression Changed error

Question

I use Angular Material Portal to move element in another place.

I use cdkPortal and cdkPortalOutlet .

I don't understand why angular throw expression changed in this super simple example

import { Component, ViewChild } from '@angular/core';
import { CdkPortal } from '@angular/cdk/portal';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  @ViewChild(CdkPortal, { static: false }) portal: CdkPortal
}

Check code here: https://stackblitz.com/edit/angular-f6sb21

open console to see error:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'portal: undefined'. Current value: 'portal: [object Object]'

Answer 1

You are referencing the same object to the cdkPortalOutlet . You actually need another ng-template with its ViewChild

<ng-template #templatePortalContent>Hello, this is a template portal</ng-template>

and in the ts file:

// This is the reference for the ng-template that we added
@ViewChild("templatePortalContent", { static: false }) templatePortalContent: TemplateRef<any>;
// This is the variable that will hold the new template
templatePortal;

constructor(private _viewContainerRef: ViewContainerRef, private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
    this.cdr.detectChanges();
}

This is for the TemplatePortal.

If you need a ComponentPortal, it means if you have already a component, then you will need to create the portal and assign it in the cdkPortalOutlet instead of templatePortal variable.

this.componentPortal = new ComponentPortal(ComponentPortalExample);

and

<ng-template [cdkPortalOutlet]="componentPortal"></ng-template>

You can check here for more info:

Here is the demo .