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

Łukasz Holeczek Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Thursday, July 3, 2025

#how-to #angular

How to Use Bootstrap Modal in Angular – The Cleanest Approach with CoreUI

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.

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.

Angular

Bootstrap

React.js

Vue.js

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:

✅ 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

🔧 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

• 📘 CModal Documentation (Angular)
• 🚀 Try the CoreUI Angular Admin Template
• 💬 Ask questions on GitHub

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

About the Author

Follow Łukasz Holeczek on GitHub Connect with Łukasz Holeczek on LinkedIn Follow Łukasz Holeczek on X (Twitter)

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 20 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.