How to trigger bootstrap modal on child component ? Angular

Question

I use bootstrap and angular. Imagine a situation where I have a situation with a parent and a child.

Table component is parent Modal component is child.

in Table component i want to click on edit button and open Modal ( child component ) In modal component i want to show bootstrap modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Here is problem because button trigger is on parent component.... How to open modal from parent data and show?

This is parent table component.

<tr *ngFor="let menu of allMenus | searchInput:searchTerm; let i=index"> 
    <td> 
        <button (click)="toggleModal(menu)" class="btn btn-secondary mr-3"> Edit </button>
        <button (click)="removeMenu(menu)" class="btn btn-secondary"> Remove </button>
    </td>
</tr>

sonEtLumiere sonEtLumiere · Accepted Answer · 2021-02-10T02:04:05

You can wrap your child component tag (selector) with a ng-container with a *ngIf checking a boolean value (displayChild), try this:

public displayChild: boolean = false;

onToggle(){
  displayChild == false ? true : false; 
}

<button (click)="onToggle()">Click!</button>

<ng-container *ngIf="displayChild">
  <child-component></child-component>
</ng-container>

How to trigger bootstrap modal on child component ? Angular

1 Answers