Angular: dynamically render components in dialog

93 views Asked by At

I have a dialog that that has multiple tabs inside it. The tabs and content of them will depend on where in the application I open this dialog from. There are some tabs that are shared and should always be displayed so I thought it would be possible to construct some smart structure to handle this.

My dialog component contains a list of BaseTabComponent which all my tabs inherits.

constructor(@Inject(MAT_DIALOG_DATA) public data: BaseTabComponent) {}

tabs: BaseTabComponent[] = [this.data, new OneTabComponent(), new AnotherTabComponent()];

In my template/html of the dialog component I would like to be able to access the template of the individual components to render them when a specific tab is selected. How can i access this through an object reference like this?

0

There are 0 answers