On this page

Angular Modal Component

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.

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-modal01',
  templateUrl: './modal01.component.html',
  standalone: true,
  imports: [
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent,
    ButtonDirective
  ]
})
export class Modal01Component {}

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 } from '@angular/core';
import {
  ButtonCloseDirective,
  ButtonDirective,
  ModalBodyComponent,
  ModalComponent,
  ModalFooterComponent,
  ModalHeaderComponent,
  ModalTitleDirective
} from '@coreui/angular';

@Component({
  selector: 'docs-modal02',
  templateUrl: './modal02.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class Modal02Component {
  public visible = false;

  toggleLiveDemo() {
    this.visible = !this.visible;
  }

  handleLiveDemoChange(event: any) {
    this.visible = event;
  }
}

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-modal03',
  templateUrl: './modal03.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class Modal03Component {}

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-modal04',
  templateUrl: './modal04.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    NgTemplateOutlet,
    ModalFooterComponent
  ]
})
export class Modal04Component {}

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-modal05',
  templateUrl: './modal05.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    NgTemplateOutlet,
    ModalFooterComponent
  ]
})
export class Modal05Component {}

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-modal06',
  templateUrl: './modal06.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class Modal06Component {}

Centered scrollable

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

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

Tooltips and popovers

cTooltips and cPopovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

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-modal08',
  templateUrl: './modal08.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    PopoverDirective,
    RouterLink,
    TooltipDirective,
    ModalFooterComponent
  ]
})
export class Modal08Component {}

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-modal11',
  templateUrl: './modal11.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class Modal11Component {}

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-modal09',
  templateUrl: './modal09.component.html',
  standalone: true,
  imports: [ButtonDirective, ModalToggleDirective, ModalComponent, ModalHeaderComponent, ModalTitleDirective, ModalBodyComponent]
})
export class Modal09Component {}

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-modal10',
  templateUrl: './modal10.component.html',
  standalone: true,
  imports: [
    ButtonDirective,
    ModalToggleDirective,
    ModalComponent,
    ModalHeaderComponent,
    ModalTitleDirective,
    ButtonCloseDirective,
    ModalBodyComponent,
    ModalFooterComponent
  ]
})
export class Modal10Component {}

API reference

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

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

component

Inputs

name	description	type	default
`alignment`	Align the modal in the center or top of the screen.	`top` \| `center`	top
`backdrop`	Apply a backdrop on body while modal is open.	`boolean` \| `static`	true
`fullscreen`	Set modal to cover the entire user viewport.	`boolean` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl`	undefined
`id`	Html id attr, required for programmatic modal visibility change.	`string`	required
`keyboard`	Closes the modal when escape key is pressed.	`boolean`	true
`size`	Size the component small, large, or extra large.	`sm` \| `lg` \| `xl`	undefined
`transition`	Remove animation to create modal that simply appear rather than fade in to view.	`boolean`	true
`scrollable`	Create a scrollable modal that allows scrolling the modal body.	`boolean`	false
`visible`	Toggle the visibility of modal component.	`boolean`	undefined
`role`	Html role for modal	`string`	dialog
`aria-modal`	Set aria-modal html attr for modal.	`string`	true

Outputs

name	description	type
`visibleChange`	Event emitted on `visible` change.	`boolean`

component

cModalTittle

directive

cModalToggle

directive

Inputs

name	description	type	default
`cModalToggle`	Html element id attr of modal to dismiss.	`string`	required

Angular Modal Component

Examples

Modal components

Live demo

Static backdrop

Scrolling long content

Scrollable

Vertically centered

Tooltips and popovers

Toggle between modals

Optional sizes

Fullscreen Modal

API reference

Modal Module

c-modal

Inputs

Outputs

c-modal-body

c-modal-footer

c-modal-header

cModalTittle

cModalToggle

Inputs