CODEWITHSUNDEEP
angularangular-material
Bogdan Tushevskyi
Bogdan Tushevskyi

Reputation: 752

show child component depend on data from parent in angular

I'm trying to archive the functionality for Material Dialog. I want to make parent popup component , which contain all my popups that i use in my app. The structure looks like this

parent-popup-component 
|
| - popup1
| - popup2
| - popup3
...component.ts ...component.html

And inside other component i call parent-popup-component like this

const dialogRef = this.dialog.open(ParentPopupComponent, {
  data: { dialogName: 'popup1' },
});

Inside parent-popup.component.html i store all my popups and pass data object with needed popup name to child popup

<popup1 [data]='data'></popup1>
<popup2 [data]='data'></popup2>
<popup3 [data]='data'></popup3>

How can i show child-popup template inside parent popup when i make a call?

Upvotes: 0

Views: 162

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86790

You could simply achieve it using *ngIf on the basis of data you are getting like this -

<popup1 [data]='data' *ngIf="data.dialogName == 'popup1'"></popup1>
<popup2 [data]='data' *ngIf="data.dialogName == 'popup2'"></popup2>
<popup3 [data]='data' *ngIf="data.dialogName == 'popup3'"></popup3>

Upvotes: 1

Related Questions