I'm trying to display a different Angular component in the same Bootstrap 4 modal depending upon which button was pressed. I have a parent component with two buttons: Button1 and Button2. The parent component renders a component which just wraps a Bootstrap 4 modal but leaves the actual modal content empty. When clicking Button1 or Button2, I'd like the modal to appear with ChildComponent1 or ChildComponent2 respectively.
In the modal content you could use an *ngIf and use a variable to specify which one to show. Something like:
<app-child1 *ngIf="showFirstChild"></app-child1>
<app-child1 *ngIf="!showFirstChild"></app-child1>
Where showFirstChild could be a boolean value.
If you had more than one component, you could use ngSwitch:
<div [ngSwitch]="componentToShow">
<app-child1 *ngSwitchDefault></app-child1>
<app-child2 *ngSwitchCase="2"></app-child2>
<app-child3 *ngSwitchCase="3"></app-child3>
<app-child4 *ngSwitchCase="4"></app-child4>
</div>
Where componentToShow could be a number type in your component.
Just use your button clicks to assign the appropriate value to a variable.
Hope that helps.