1

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.

Sammy
  • 3,395
  • 7
  • 49
  • 95
  • Use this [**answer**](http://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component/42736058#42736058) which makes one modal duplicate the code for the next modal – Aravind Apr 27 '17 at 21:29

1 Answers1

1

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.

Tyler Jennings
  • 8,761
  • 2
  • 44
  • 39
  • Thank you. I thought about that but I was worried that since Bootstrap modal uses data-toggle, that there would be a flickering in display. But the real question is: while the modal is open, if I change one of the variables on the fly, will the switch case react accordingly and make one component disappear and the other appear? – Sammy Apr 27 '17 at 21:26
  • Wouldn't using `ng-container` be even better in this case? See here: https://netbasal.com/getting-to-know-the-ng-container-directive-in-angular-a97b7a33c8ea – Sammy Apr 28 '17 at 05:40
  • 1
    In my opinion it really depends on the size of your child components, if you want to be able to reuse them as non-modal components, and if each has it's own logic that you don't want to intermingle in the modal component. There is no real right or wrong, it is more subjective to the details of your application. – Tyler Jennings Apr 28 '17 at 10:38
  • Yes actually, the whole point is that I will be reusing the same components as non modal sometimes. Does the `ng-container` directive end up recreating the component every time the `*ngSwitchCase` gets evaluated? – Sammy Apr 28 '17 at 10:59
  • I think, and correct me if I'm wrong, the `ng-container` is useful if you wanted to not have the content be actual separate components, just put the content that would be in `app-child` inside `ng-container` instead of a separate component. If you are using separate components, then there is no reason to use `ng-container`, and switching on the component tags(``) is sufficient. I do not think, using `ngSwitch` will re-init a component every time the expression is evaluated. It is more like `ngIf` where it is hidden from the DOM. – Tyler Jennings Apr 28 '17 at 11:12