How to Use Bootstrap Modal in Vue 3 – Clean Integration with CoreUI

Angular Bootstrap Modal

Modals are a key part of modern UI — used for confirmations, forms, alerts, and more. If you’re building an Angular application with Bootstrap 5 styles, you might wonder how to implement modals without relying on jQuery or manual DOM manipulation.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


In this article, you’ll learn how to use a Bootstrap-style modal in Angular with CModal from CoreUI for Angular. It’s fully component-based, reactive, and ready to use in Angular apps — without hacks, boilerplate, or data-bs-* attributes.


👤 Who is this for?

This article is perfect for Angular developers who:

  • Use Bootstrap 5 or CoreUI in their Angular projects.
  • Want to use modals declaratively via Angular components.
  • Prefer reactive patterns over manual Bootstrap JS handling.
  • Need keyboard accessibility, SSR compatibility, and mobile responsiveness.

🧨 Why Native Bootstrap JS Doesn’t Work Well in Angular

Bootstrap’s own modals are JavaScript-powered and imperatively controlled:

const modal = new bootstrap.Modal(document.getElementById('modal'))
modal.show()

That doesn’t fit Angular’s reactive, declarative structure. Problems include:

Issue Why It’s a Problem in Angular
DOM-based instantiation Angular discourages direct DOM manipulation
Manual lifecycle control Risk of memory leaks or UI bugs
No TypeScript integration No types, no inputs/outputs
Breaks with Angular SSR Cannot run cleanly on the server

✅ The Angular Way: Use CModal from CoreUI

With CModal, you get:

  • Bootstrap 5 styling out of the box
  • Angular component with visible input and close event
  • Proper focus trap and ESC key behavior
  • Slot-based layout for header, body, footer
  • Full accessibility and responsive behavior

⚙️ Example: Modal with Form Content

app.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  visible = false

  openModal() {
    this.visible = true
  }

  closeModal() {
    this.visible = false
  }
}

app.component.html

<c-button color="primary" (click)="openModal()">Open Modal</c-button>

<c-modal [visible]="visible" (close)="closeModal()">
  <c-modal-header>
    <c-modal-title>Add New Item</c-modal-title>
  </c-modal-header>

  <c-modal-body>
    <c-form-input label="Item Name"></c-form-input>
    <c-form-input label="Price" type="number" class="mt-2"></c-form-input>
  </c-modal-body>

  <c-modal-footer>
    <c-button color="secondary" (click)="closeModal()">Cancel</c-button>
    <c-button color="primary">Save</c-button>
  </c-modal-footer>
</c-modal>

🧪 Features You Get Automatically

Feature ✅ Supported
Bootstrap 5 styling
Controlled via [visible]
Emits (close) event
Focus trap & ESC key
ARIA roles
SSR-safe
Dark mode compatible
Responsive / fullscreen ✅ via props

🔧 Common Props

You can use the following props on <c-modal>:

  • scrollable – allow scrolling inside the modal body
  • centered – vertically center the modal
  • fullscreen – make the modal full screen
  • size="sm" | "lg" | "xl" – change modal width

Example:

<c-modal [visible]="visible" centered fullscreen="md-down" size="lg">...</c-modal>

❓ FAQ

Can I use CoreUI modal in Angular with SSR (e.g., Angular Universal)?

Yes — the modal is rendered declaratively and doesn’t require document or window.

Is the modal accessible?

Yes — focus is managed, ARIA roles are used, ESC key closes it.

Does it support animations?

Yes — fade transitions are built-in, matching Bootstrap’s default behavior.


🧠 Why this matters

You don’t want to mix imperative Bootstrap code into your Angular app. That leads to:

  • Component lifecycle issues,
  • Inconsistent state,
  • Broken TypeScript support.

With CModal, you get a real Angular component, not a wrapper — with complete control, styling, and flexibility built in.


➕ Explore More


Use Bootstrap-styled modals the Angular way — fully declarative, accessible, and ready for production with CoreUI for Angular.


About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to Remove Elements from a JavaScript Array
How to Remove Elements from a JavaScript Array

How to Center a Button in CSS
How to Center a Button in CSS

How to Convert a Map to an Array in JavaScript
How to Convert a Map to an Array in JavaScript

How to Use JavaScript setTimeout()
How to Use JavaScript setTimeout()

How to Fix “Sass @import Rules Are Deprecated and Will Be Removed in Dart Sass 3.0.0.”
How to Fix “Sass @import Rules Are Deprecated and Will Be Removed in Dart Sass 3.0.0.”

What is JavaScript Array.pop() Method?
What is JavaScript Array.pop() Method?