CODEWITHSUNDEEP
angularbootstrap-modal
Sammy
Sammy

Reputation: 3697

Rendering Angular Component According to Button Pressed

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.

Upvotes: 1

Views: 823

Answers (1)

Tyler Jennings
Tyler Jennings

Reputation: 8921

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.

Upvotes: 1

Related Questions