Modals

<!-- buttons -->
<button type="button" class="btn btn-primary" (click)="showModal()">Open modal
</button>
<button type="button" class="btn btn-primary" (click)="showSmallModal()">Open small modal
</button>

<!-- modals -->
<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <i aria-hidden="true"
            class="close material-icons"
            (click)="hideModal()"
            aria-label="Close">cancel</i>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <span class="en-btn btn-link" (click)="hideModal()">Close</span>
            <span class="en-btn en-btn-primary"
            (click)="hideModal()">Save changes</span>
        </div>
    </div>
</div>
</div>
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body">
            <span aria-hidden="true"
            class="close fg-dark material-icons"
            (click)="hideSmallModal()"
            aria-label="Close">cancel</span>
            I am a child modal, opened from parent component!
            <br>
        </div>
        <div class="modal-footer">
            <span class="en-btn btn-link" data-dismiss="modal"
            (click)="hideSmallModal()">Close</span>
            <span class="en-btn en-btn-primary"
            (click)="hideSmallModal()">Save changes</span>
        </div>
    </div>
</div>
</div>