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?