# Modal

The Modal component is slightly modified to make it more beautiful. Let's have a glance.

Wrap modal with class modal-{colorName}" to change theme of modal.

<div class="modal-primary d-inline-block">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-outline-primary" (click)="modalOpenPrimary(modalPrimary)" rippleEffect>

  <!-- Modal -->
  <ng-template #modalPrimary let-modal>
    <div class="modal-header">
      <h5 class="modal-title" id="myModalLabel160">Primary Modal</h5>
      <button type="button" class="close" (click)="modal.dismiss('Cross click')" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    <div class="modal-body" tabindex="0" ngbAutofocus>
      Tart lemon drops macaroon oat cake chocolate toffee chocolate bar icing. Pudding jelly beans carrot cake pastry
      gummies cheesecake lollipop. I love cookie lollipop cake I love sweet gummi bears cupcake dessert.
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="modal.close('Accept click')" rippleEffect>
  <!-- / Modal -->
modalOpenPrimary(modalPrimary) {
  this.modalService.open(modalPrimary, {
    centered: true,
    windowClass: 'modal modal-primary'
Property Class Description
windowClass .modal.modal-{colorName} To change the modal color. colorName : primary / secondary / success / danger / warning / info.

Result :


You can check demo on this (opens new window) page.

Last Updated: 3/9/2021, 4:18:01 PM