Angular Modal Component

Modal

Angular Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize Angular CoreUI Modals easily. Multiple examples and tutorial.

Available in Other JavaScript Frameworks

CoreUI Angular Modal Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Examples

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-components',
  templateUrl: './modal-components.component.html',
  imports: [
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent,
    ButtonDirective
  ]
})
export class ModalComponentsComponent {}

<c-modal
  [keyboard]="false"
  [transition]="false"
  backdrop="static"
  class="position-static d-block show"
  id="modalStatic"
>
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button cButtonClose></button>
  </c-modal-header>
  <c-modal-body>Modal body text goes here.</c-modal-body>
  <c-modal-footer>
    <button cButton color="secondary">Close</button>
    <button cButton color="primary">Save changes</button>
  </c-modal-footer>
</c-modal>

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

import { Component, signal } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-live-demo',
  templateUrl: './modal-live-demo.component.html',
  imports: [
    ButtonDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalLiveDemoComponent {
  readonly visible = signal(false);

  toggleLiveDemo() {
    this.visible.update((value) => !value);
  }
}

<button (click)="toggleLiveDemo()" cButton>Launch demo modal</button>

<c-modal id="liveDemoModal" [(visible)]="visible">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button (click)="toggleLiveDemo()" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>Woohoo, you are reading this text in a modal!</c-modal-body>
  <c-modal-footer>
    <button (click)="toggleLiveDemo()" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Save changes</button>
  </c-modal-footer>
</c-modal>

Static backdrop

If you set a backdrop to static, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-static-backdrop',
  templateUrl: './modal-static-backdrop.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalStaticBackdropComponent {}

<button [cModalToggle]="staticBackdropModal.id" cButton>Launch static backdrop modal</button>

<c-modal #staticBackdropModal backdrop="static" id="staticBackdropModal">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="staticBackdropModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>Woohoo, you&#39;re reading this text in a modal!</c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="staticBackdropModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Understood</button>
  </c-modal-footer>
</c-modal>

Portal

By default, c-modal renders in place in the DOM, moved on top of everything else purely through position: fixed and stacking. When an ancestor establishes its own containing block (e.g. via transform, filter, or perspective), it traps that fixed positioning and clips the modal. Set the portal input to move the modal’s host element into container (an Element, a function returning one, or document.body by default) while it’s visible, and restore it to its original position on close.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-portal',
  templateUrl: './modal-portal.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalPortalComponent {}

<div class="border rounded p-3 mb-3" style="max-height: 160px; overflow: auto; transform: translateZ(0);">
  <p>This wrapper creates a new containing block (via <code>transform</code>), which normally traps a fixed-position modal inside it.</p>
  <button [cModalToggle]="portalModal.id" cButton>Launch portal modal</button>

  <c-modal #portalModal portal id="portalModal">
    <c-modal-header>
      <h5 cModalTitle>Modal title</h5>
      <button [cModalToggle]="portalModal.id" cButtonClose></button>
    </c-modal-header>
    <c-modal-body>
      Thanks to the <code>portal</code> input, this modal is moved to <code>document.body</code> while visible, so it escapes the clipped wrapper above instead of being trapped inside it.
    </c-modal-body>
    <c-modal-footer>
      <button [cModalToggle]="portalModal.id" cButton color="secondary">
        Close
      </button>
      <button cButton color="primary">Understood</button>
    </c-modal-footer>
  </c-modal>
</div>

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

import { Component } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-scrolling-long-content',
  templateUrl: './modal-scrolling-long-content.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    NgTemplateOutlet,
    ModalFooterComponent
  ]
})
export class ModalScrollingLongContentComponent {}

<button [cModalToggle]="scrollingLongContentModal.id" cButton>Scrolling long content</button>

<c-modal #scrollingLongContentModal id="scrollingLongContentModal">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="scrollingLongContentModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    <ng-container *ngTemplateOutlet="longContent"></ng-container>
  </c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="scrollingLongContentModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Save changes</button>
  </c-modal-footer>
</c-modal>

<ng-template #longContent>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
</ng-template>

Scrollable

You can also create a scrollable modal that allows scroll the modal body by adding scrollable prop.

import { Component } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-scrollable',
  templateUrl: './modal-scrollable.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    NgTemplateOutlet,
    ModalFooterComponent
  ]
})
export class ModalScrollableComponent {}

<button [cModalToggle]="scrollableLongContentModal.id" cButton>Scrollable long content</button>

<c-modal #scrollableLongContentModal id="scrollableLongContentModal" scrollable>
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="scrollableLongContentModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    <ng-container *ngTemplateOutlet="longContent"></ng-container>
  </c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="scrollableLongContentModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Save changes</button>
  </c-modal-footer>
</c-modal>

<ng-template #longContent>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
  <p>
    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  </p>
  <p>
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
    lacus vel augue laoreet rutrum faucibus dolor auctor.
  </p>
  <p>
    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
    scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
    auctor fringilla.
  </p>
</ng-template>

Vertically centered

Add alignment="center to c-modal for vertically centered modal.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-vertically-centered',
  templateUrl: './modal-vertically-centered.component.html',

  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalVerticallyCenteredComponent {}

<button [cModalToggle]="verticallyCenteredModal.id" cButton>Centered modal</button>

<c-modal #verticallyCenteredModal alignment="center" id="verticallyCenteredModal">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="verticallyCenteredModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    Woohoo, you are reading this text in a modal!
  </c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="verticallyCenteredModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Understood</button>
  </c-modal-footer>
</c-modal>

Centered scrollable

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-vertically-centered-scrollable',
  templateUrl: './modal-vertically-centered-scrollable.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalVerticallyCenteredScrollableComponent {}

<button [cModalToggle]="verticallyCenteredScrollableModal.id" cButton>Centered scrollable modal</button>

<c-modal #verticallyCenteredScrollableModal
         [scrollable]="true"
         alignment="center"
         id="verticallyCenteredScrollableModal">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="verticallyCenteredScrollableModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    <p>
      This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show
      how vertically centering the modal works when combined with scrollable modals. We also use some repeated line
      breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes
      longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.
    </p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p>Just like that.</p>
  </c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="verticallyCenteredScrollableModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Understood</button>
  </c-modal-footer>
</c-modal>

Tooltips and popovers

cTooltip and cPopover can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. A tooltip or popover shown inside a dialog is dismissed on its own: the first Escape closes the popover and a subsequent one closes the dialog.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective,
  PopoverDirective,
  TooltipDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-tooltips-popovers',
  templateUrl: './modal-tooltips-popovers.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    PopoverDirective,
    RouterLink,
    TooltipDirective,
    ModalFooterComponent
  ]
})
export class ModalTooltipsPopoversComponent {}

<button [cModalToggle]="withPopoverModal.id" cButton>Modal with Popover</button>

<c-modal #withPopoverModal alignment="center" id="withPopoverModal">
  <c-modal-header>
    <h5 cModalTitle>Modal title</h5>
    <button [cModalToggle]="withPopoverModal.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>
    <h5>Popover in a modal</h5>
    This
    <button [cPopoverTrigger]="'click'" [cPopover]="popoverHtml" [cPopoverOptions]="{strategy: 'fixed'}" cButton>button</button>
    triggers a popover on click.
    <ng-template #popoverHtml>
      <h3 class="popover-header">
        Popover title
      </h3>
      <div class="popover-body" id="">
        And here’s some amazing content. It’s very engaging. Right?
      </div>
    </ng-template>
    <hr/>
    <h5>Tooltips in a modal</h5>
    <p>
      <a routerLink cTooltip="Tooltip text">This link</a>
      and
      <a [cTooltipOptions]="{strategy: 'fixed'}"
         routerLink
         cTooltip="Tooltip text"
         cTooltipPlacement="bottom">that link
      </a>
      have tooltips on hover.
    </p>
  </c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="withPopoverModal.id" cButton color="secondary">
      Close
    </button>
    <button cButton color="primary">Understood</button>
  </c-modal-footer>
</c-modal>

Toggle between modals

Toggle between multiple modals with cModalToggle values juggling. Please note multiple modals cannot be opened at the same time — this method simply toggles between two separate modals.

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-toggle-between-modals',
  templateUrl: './modal-toggle-between-modals.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalToggleBetweenModalsComponent {}

<button [cModalToggle]="ModalOne.id" cButton>Open first modal</button>

<c-modal id="liveDemoModalOne" #ModalOne alignment="center">
  <c-modal-header>
    <h5 cModalTitle>Modal 1 title</h5>
    <button [cModalToggle]="ModalOne.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>Show a second modal and hide this one with the button below</c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="ModalOne.id" cButton color="secondary">
      Close
    </button>
    <button [cModalToggle]="ModalTwo.id" cButton color="primary">Open second modal</button>
  </c-modal-footer>
</c-modal>

<c-modal id="liveDemoModalTwo" #ModalTwo>
  <c-modal-header>
    <h5 cModalTitle>Modal 2 title</h5>
    <button [cModalToggle]="ModalTwo.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>Hide this modal, and show the first one with the button below</c-modal-body>
  <c-modal-footer>
    <button [cModalToggle]="ModalTwo.id" cButton color="secondary">
      Close
    </button>
    <button [cModalToggle]="ModalOne.id" cButton color="primary">Back to first</button>
  </c-modal-footer>
</c-modal>

Optional sizes

Modals have three optional sizes, available via modifier props be placed on a c-modal. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size	Property value	Modal max-width
Small	`sm`	`300px`
Default	none	`500px`
Large	`lg`	`800px`
Extra Large	`xl`	`1140px`

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-optional-sizes',
  templateUrl: './modal-optional-sizes.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ModalBodyComponent
  ]
})
export class ModalOptionalSizesComponent {}

<button [cModalToggle]="modalXl.id" cButton>Extra large modal</button>
<button [cModalToggle]="modalLg.id" cButton>Large modal</button>
<button [cModalToggle]="modalSm.id" cButton>Small modal</button>

<c-modal #modalXl id="modalXl" size="xl">
  <c-modal-header>
    <h5 cModalTitle>Extra large modal</h5>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #modalLg id="modalLg" size="lg">
  <c-modal-header>
    <h5 cModalTitle>Large modal</h5>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #modalSm id="modalSm" size="sm">
  <c-modal-header>
    <h5 cModalTitle>Small modal</h5>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

Another override is the option to pop up a modal that covers the user viewport, available via property fullscreen.

`fullscreen` value	Availability
`true`	Always
`sm`	Below `576px`
`md`	Below `768px`
`lg`	Below `992px`
`xl`	Below `1200px`
`xxl`	Below `1400px`

import { Component } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective,
  ModalToggleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal-fullscreen',
  templateUrl: './modal-fullscreen.component.html',
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class ModalFullscreenComponent {}

<button [cModalToggle]="fullScreen.id" cButton>Full screen</button>
<button [cModalToggle]="fullScreenSm.id" cButton>Full screen below sm</button>
<button [cModalToggle]="fullScreenMd.id" cButton>Full screen below md</button>
<button [cModalToggle]="fullScreenLg.id" cButton>Full screen below lg</button>
<button [cModalToggle]="fullScreenXl.id" cButton>Full screen below xl</button>
<button [cModalToggle]="fullScreen2Xl.id" cButton>Full screen below xxl</button>

<c-modal #fullScreen [fullscreen]="true" id="fullScreen">
  <c-modal-header>
    <h5 cModalTitle>Full screen</h5>
    <button [cModalToggle]="fullScreen.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
  <c-modal-footer>
    <button cButton [cModalToggle]="fullScreen.id">Close</button>
  </c-modal-footer>
</c-modal>

<c-modal #fullScreenSm fullscreen="sm" id="fullScreenSm">
  <c-modal-header>
    <h5 cModalTitle>Full screen below sm</h5>
    <button [cModalToggle]="fullScreenSm.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #fullScreenMd fullscreen="md" id="fullScreenMd">
  <c-modal-header>
    <h5 cModalTitle>Full screen below md</h5>
    <button [cModalToggle]="fullScreenMd.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #fullScreenLg fullscreen="lg" id="fullScreenLg">
  <c-modal-header>
    <h5 cModalTitle>Full screen below lg</h5>
    <button [cModalToggle]="fullScreenLg.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #fullScreenXl fullscreen="xl" id="fullScreenXl">
  <c-modal-header>
    <h5 cModalTitle>Full screen below xl</h5>
    <button [cModalToggle]="fullScreenXl.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

<c-modal #fullScreen2Xl fullscreen="xxl" id="fullScreen2Xl">
  <c-modal-header>
    <h5 cModalTitle>Full screen below xxl</h5>
    <button [cModalToggle]="fullScreen2Xl.id" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>...</c-modal-body>
</c-modal>

API reference

import { ModalModule } from '@coreui/angular';

@NgModule({
    imports: [ModalModule,]
})
export class AppModule() { }

component

jsx

import { ModalComponent } from '@coreui/angular'

Props

Property	Default	Type
alignment	`'top'`	`'top'`, `'center'`
Align the modal in the center or top of the screen.
ariaModal	`false`	`boolean`
Set aria-modal html attr for modal
backdrop	`true`	`boolean`, `'static'`
Apply a backdrop on the body while the modal is open.
container5.7.20+	`document.body`	`Element`, `object`, `null`
Appends the angular modal to a specific element. You can pass an HTML element or function that returns a single element. By default, `document.body`.
fullscreen	`undefined`	`boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'`
Set modal to cover the entire user viewport.
id	`undefined`	`string`
HTML id attribute, required for programmatic visibility change.
keyboard	`true`	`boolean`
Closes the modal when the escape key is pressed.
portal5.7.20+	`false`	`boolean`
Generates modal using a portal
role	`'dialog'`	`string`
Default role for modal
scrollable	`false`	`boolean`
Create a scrollable modal that allows scrolling the modal body.
size	`undefined`	`'sm'`, `'lg'`, `'xl'`
Size the component small, large, or extra large.
transition	`true`	`boolean`
Remove animation to create a modal that simply appears rather than fades in to view.
visible	`false`	`boolean`
Toggle the visibility of modal component.

Events

Event name

Event name
visibleChange
Event triggered on visible change `$event` `boolean`

visibleChange

Event triggered on visible change

$event boolean

component

jsx

import { ModalBodyComponent } from '@coreui/angular'

component

jsx

import { ModalFooterComponent } from '@coreui/angular'

component

jsx

import { ModalHeaderComponent } from '@coreui/angular'

cModalTitle

directive

jsx

import { ModalTitleDirective } from '@coreui/angular'

cModalToggle

directive

jsx

import { ModalToggleDirective } from '@coreui/angular'

Property	Default	Type
cModalToggle	`undefined`	`string`
Html id attr of modal to dismiss.

Angular Modal Component

Modal

Available in Other JavaScript Frameworks

Examples

Modal components

Live demo

Static backdrop

Portal

Scrolling long content

Scrollable

Vertically centered

Tooltips and popovers

Toggle between modals

Optional sizes

Fullscreen Modal

API reference

Modal Module

c-modal

Props

Events

c-modal-body

c-modal-footer

c-modal-header

cModalTitle

cModalToggle