What does the "let-modal" tag do?

1k Views Asked by At

So, I've been using a basic ng-bootstrap modal for an Angular app.

<ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title"></h4>
      <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
    </div>
    
    <div class="modal-body">
      <form>
        <div class="mb-3">
          <label for="dateOfBirth">Date of birth</label>
        </div>
      </form>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
    </div>
  </ng-template>
  
  <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
  
  <hr> 

To work, it needs the let-x tag, which then that x it used to control functions like dismiss and close. Why is that? Why can't an instance of Ngb-Modal handle these things? And most importantly, how does this all work?

0

There are 0 best solutions below