Angular material integrating `ng-content` within popup modal

3gwebtrain 0
Viewed 20

there a popup, which should include multiple component using the "" with assinged id. it's not working. I am trying to add a selected 'header' inside the div containing a border. but not working. I am much confused. need the help.

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);
  }
}

Thanks in advance

angular-template angular-material angular
1 Answers

You can pass in an array of template and just use *ngFor to render the templates

import { Component, TemplateRef, VERSION, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('childTemplate') childTemplate: TemplateRef<HTMLAllCollection>;
  @ViewChild('childTemplate2') childTemplate2: TemplateRef<HTMLAllCollection>;
  @ViewChild('childTemplate3') childTemplate3: TemplateRef<HTMLAllCollection>;
  constructor(public dialog: MatDialog) {}
  openDialog() {
    this.dialog.open(HelloComponent, {
      data: {
        name: 'popup',
        pagecontents: [
          this.childTemplate,
          this.childTemplate2,
          this.childTemplate3,
        ],
      },
    });
  }
}

forked stackblitz

Naren Murali0
Related