Modal Component

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Example Code:
              
                <ng-template #DefaultModelContent let-c="close" let-d="dismiss">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel1">Basic Modalh4>
                  <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">×span>
                  button>
                div>
                <div class="modal-body">
                  <h5>Check First Paragraphh5>
                  <p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple
                    pie.
                    Brownie carrot
                    cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake
                    cookie
                    chocolate cake
                    liquorice. Apple pie sugar plum powder donut soufflé.p>
                  <p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice
                    cream.
                    Danish candy
                    cake.p>
                  <hr>
                  <h5>Some More Texth5>
                  <p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll
                    bonbon
                    toffee danish.
                    Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop
                    candy
                    cookie biscuit pie.p>
                <div>
                <div class="modal-footer">
                  <button type="button" class="btn grey btn-outline-secondary"
                    (click)="d('Close modal')" ngbAutofocus>Closebutton>
                  <button type="button" class="btn btn-outline-primary">Save changesbutton> div>
             <ng-template>
              
          
Modal options Class Description
Background modal color .bg-* Use any template color from COLOR PALETTE that you like to use for modal background.
Border modal color .border-* Use any template color from COLOR PALETTE that you like to use for modal border color.
Modal sizes .modal-[xl/lg/sm/xs] Different sizes of modal that can be used for different examples.

There are so many features that can be used for modals. Like :

  • Different heading options
  • Different animation to open modal, etc...

You can also create button dropdowns and split button using .btn-group wrapper.

Referrals :

Type URL
NG-Bootstrap Modal https://ng-bootstrap.github.io/#/components/modal/
Bootstrap Modal https://getbootstrap.com/docs/4.2/components/modal/
Template Page https://modernadmin.evolvision.com/components/modals