Angular material integrating `ng-content` within popup modal

I have a popup, which should include multiple component using the <ng-conente> with assigned id. It's not working. I am trying to add a selected 'header' inside the div containing a border. How can I resolve it?

Click on open button.

Live URL

app.ts

export class AppComponent {
@ViewChild('childTemplate') childTemplate: TemplateRef<HTMLAllCollection>;
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(HelloComponent, {
data: {
name: 'popup',
pagecontent: this.childTemplate,
},
});
}
}


Pop component:

export class HelloComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
ngOnInit() {
console.log(this.data);
}
}

Continue reading...