Mastering Angular Modals and Popups: A Step-by-Step Beginner’s Guide

Modals and popups are everywhere on the web, helping guide users, displaying key information, and enhancing interactivity.

But when it comes to building them in Angular, it’s not just about making them work - it’s about doing it efficiently.

A well-placed modal can improve user flow, deliver critical details without overwhelming the page, and add a layer of polish to your project. But building reusable, maintainable modals in Angular? That’s where things get tricky.

In this guide, I’ll walk you through how to create modals and popups in Angular step by step. You’ll learn how to build them for different use cases—whether it’s confirming actions, delivering extra information, or boosting the user experience.

So that by the end, you’ll know how to integrate them seamlessly into your projects, making your work more efficient and professional.

Let's get into it…

Sidenote: If you struggle with any of the concepts in this guide, or want to take a deep dive into Angular, check out my complete Angular Developer course:

This is the only Angular course you need to learn Angular, build enterprise-level applications from scratch, and get hired as an Angular Developer.

I guarantee you this is the most comprehensive online course on Angular. You will learn Angular and become a confident Angular Developer by building real-world projects (including a massive video sharing application) step-by-step alongside a Senior Developer.

And guess what? We work on Modals and Popups while building that huge video player project, so definitely check it out...

With that out of the way, let’s get into this guide!

Popups vs. Modals

Before we get into the step-by-step process, let’s clear up the difference between popups and modals so you know when to use each.

Popups

Popups are great for quick, simple interactions. They’re those small windows that appear in front of the main content, perfect for things like notifications, tooltips, or brief prompts.

For example, you’d trigger a popup if you wanted to give users a quick heads-up or ask them for a quick action without disrupting the flow of what they’re doing.

Modals

On the other hand, modals are all about grabbing full attention. When a modal appears, the rest of the screen is typically locked, forcing users to focus on the task at hand.

Think of a modal as the go-to option when you need users to concentrate - like filling out a form, confirming an action, or engaging with more complex content like videos or detailed information.

How do you decide which to use?

A good rule of thumb is:

• If you need something lightweight that keeps your users moving through your site, a popup works perfectly
• But when you need them to stop and focus, like confirming a delete action or submitting a form, go for a modal

So let’s walk through how to build both of these.

Setting up your Angular environment

Before you can start building popups and modals in Angular, let’s make sure your environment is ready to go. Whether you’re new to Angular or just need a quick refresher, follow these steps to get set up.

Install the Angular CLI

First, you’ll need the Angular Command Line Interface (CLI) to manage your projects. It makes working with Angular a lot easier.

To install it, open your terminal and run this command:

npm install -g @angular/cli

This installs the Angular CLI globally on your machine, meaning you can use it for any project without reinstalling it each time.

Create a new Angular project

With the CLI installed, you’re ready to create a new project. Navigate to the folder where you want to set up your project and run:

ng new angular-popups-modals

The CLI will ask you a few questions, like whether you want to add Angular routing or which stylesheet format you prefer.

Go ahead and choose the options that suit your project best. Once that’s done, switch into your new project folder:

cd angular-popups-modals

Install extra tools (if needed)

Depending on what you’re building, you might need some additional tools. For example, if you plan to use Angular Material to create your modals, you’ll need to install it with this command:

ng add @angular/material

More on that later though. For now, go ahead and follow the prompts to pick a theme, and Angular Material will be added to your project.

Run your application

Now that everything’s set up, it’s time to see if your environment is working. Serve your application locally by running:

ng serve

Once the server is running, open your browser and go to http://localhost:4200/.

If you see the Angular welcome page, you’re all set, your environment is ready, and you can now start building those popups and modals.

Building your first popup in Angular

Now that your environment is all set up, let’s create your first popup. I’ll walk you through each step, and by the end, you’ll have a reusable popup component ready to go.

Create a new component for the popup

First, you’ll want to create a new component specifically for your popup. This makes it easy to reuse across your app whenever you need it.

In your terminal, run this command:

ng generate component simple-popup

This will create a new folder called simple-popup under src/app, and it’ll include all the files you need: TypeScript, HTML, and CSS.

Design the popup's template

Next, let’s design how your popup will look. Open the simple-popup.component.html file and add the following HTML:

<div class="popup-overlay" (click)="closePopup()">
  <div class="popup-content" (click)="$event.stopPropagation()">
	<h2>Welcome to the Popup!</h2>
	<p>This is a simple popup component in Angular.</p>
	<button (click)="closePopup()">Close</button>
  </div>
</div>

So let’s look at this code:

• popup-overlay: This is the background overlay that covers the screen. Clicking on it will close the popup
• popup-content: This is where your actual content goes, like the title, message, and a close button. We’re using stopPropagation() so that clicks inside the popup don’t accidentally close it
• closePopup(): This method will handle closing the popup when the overlay or button is clicked

Add some styling for the popup

To make the popup look polished, let’s add some basic CSS.

Open the simple-popup.component.css file and paste in these styles:

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

This styling centers the popup on the screen with a semi-transparent overlay, and the content has rounded corners, padding, and a slight shadow for a clean look.

Implement the popup logic in the component

Now, let’s add the logic that will control the popup. Open simple-popup.component.ts and add this code:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-simple-popup',
  templateUrl: './simple-popup.component.html',
  styleUrls: ['./simple-popup.component.css']
})
export class SimplePopupComponent {
  @Output() close = new EventEmitter<void>();

  closePopup() {
	this.close.emit();
  }
}

Here’s what’s happening:

• @Output() close: This creates an output event that the parent component can listen for when the popup needs to be closed
• closePopup(): This method emits the close event when the user clicks the overlay or the close button

Use the popup in a parent component

To actually use the popup, you need to integrate it into a parent component. In the parent component’s HTML (e.g., app.component.html), add this:

<button (click)="showPopup()">Show Popup</button>
<app-simple-popup *ngIf="isPopupVisible" (close)="hidePopup()"></app-simple-popup>

In the parent component’s TypeScript file (e.g., app.component.ts), include this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isPopupVisible = false;

  showPopup() {
	this.isPopupVisible = true;
  }

  hidePopup() {
	this.isPopupVisible = false;
  }
}

Here’s how it works:

• showPopup(): This method sets isPopupVisible to true, making the popup appear
• hidePopup(): This method hides the popup by setting isPopupVisible to false
• ngIf directive: The popup is only rendered when isPopupVisible is true, keeping it lightweight

Test your popup

Finally, let’s test everything out. Run your Angular app by typing:

ng serve

Head over to http://localhost:4200/ in your browser, click the “Show Popup” button, and your popup should appear.

You can close it by clicking the close button or anywhere on the overlay.

How to create a Modal in Angular

Now that you’ve got the hang of popups, it’s time to level up and create a modal. Don’t worry - while modals are a little more complex, I’ll guide you through each step.

By the end, you’ll have a fully functional modal ready to use in your Angular project.

Create a new component for the Modal

Just like with popups, you’ll create a new component to handle your modal. Run this command in your terminal to generate the component:

ng generate component simple-modal

This creates a new folder called simple-modal with all the necessary files (TypeScript, HTML, and CSS) so you can start building.

Design the Modal's template

Next, let’s set up the HTML for the modal. Open simple-modal.component.html and add this:

<div class="modal-overlay" (click)="closeModal()">
  <div class="modal-content" (click)="$event.stopPropagation()">
	<h2>Modal Title</h2>
	<p>This is the content of the modal. It can include text, images, forms, or any other Angular component.</p>
	<button (click)="closeModal()">Close</button>
  </div>
</div>

Here’s a quick breakdown of what’s happening:

• modal-overlay: This darkened background covers the screen. Clicking it will close the modal
• modal-content: This is where your main content lives, like a title, text, or forms. We’re using stopPropagation() to prevent clicks inside the modal from accidentally closing it
• closeModal(): This function handles closing the modal when the user clicks the overlay or the close button

Add styling for the Modal

Now let’s make the modal look polished. Open simple-modal.component.css and add the following styles:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

This styling ensures your modal is centered on the screen with a dark overlay. The content has a clean, rounded appearance with a bit of padding for that polished feel.

Add Modal logic to the component

Now, let’s add the logic that makes the modal work. Open simple-modal.component.ts and add this code:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-simple-modal',
  templateUrl: './simple-modal.component.html',
  styleUrls: ['./simple-modal.component.css']
})
export class SimpleModalComponent {
  @Output() close = new EventEmitter<void>();

  closeModal(): void {
	this.close.emit();
  }
}

Here’s how it works:

• @Output() close: This event emitter allows the parent component to listen for when the modal should be closed
• closeModal(): This method emits the close event when the user clicks the overlay or the close button

Integrate the Modal into a parent component

To use the modal, you need to hook it up to a parent component. In your parent component’s HTML file (e.g., app.component.html), add this:

<button (click)="showModal()">Show Modal</button>
<app-simple-modal *ngIf="isModalVisible" (close)="hideModal()"></app-simple-modal>

And in the parent component’s TypeScript file (e.g., app.component.ts), add this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isModalVisible = false;

  showModal() {
	this.isModalVisible = true;
  }

  hideModal() {
	this.isModalVisible = false;
  }
}

Here’s how it works:

• showModal(): This method makes the modal visible by setting isModalVisible to true
• hideModal(): This hides the modal by setting isModalVisible to false
• ngIf directive: The modal is only displayed when isModalVisible is true, keeping it lightweight and efficient

Customize the Modal

One of the best things about modals is how customizable they are. Here are some ways you can make your modal even better:

1. Dynamic Content: Use Angular’s @Input decorator to pass different content to the modal, making it versatile for various uses
2. Animation: Add Angular animations to make your modal appear and disappear smoothly, giving it a polished feel
3. Form Handling: Embed forms in your modal to capture user input. Angular’s reactive forms can help manage complex logic and validation
4. Accessibility: Ensure your modal is accessible by adding ARIA roles and enabling keyboard navigation, like closing the modal with the Esc key

Test your Modal

Now let’s see it in action. Start your Angular app by running:

ng serve

Open your browser and go to http://localhost:4200/. Click the “Show Modal” button, and your modal should appear.

You can close it by clicking the button inside the modal or anywhere on the overlay.

Simplifying Popups and Modals with Angular Material

While building popups and modals from scratch gives you complete control, it can also be time-consuming.

The good news is that if you’re looking for a faster solution that’s still polished and responsive, Angular Material is a great option. It comes with pre-built components, including modals, that are easy to integrate into your projects. Plus, it’s designed with accessibility and responsiveness in mind.

In this section, I’ll show you how to create a modal using Angular Material, and I’ll introduce a few other third-party libraries that can save you even more time when building popups and modals.

Set up Angular Material

If you haven’t already added Angular Material to your project, you can do so with a quick command. Just run:

ng add @angular/material

The CLI will guide you through the setup process, asking you to choose a theme and configure global typography and animations.

Once you’ve made your choices, Angular Material will be added to your project.

Create a Modal with Angular Material

One of the best features in Angular Material is the MatDialog component, which makes creating modals super simple. Let’s walk through how to set it up.

First, create a new component to handle the content of your modal by running:

ng generate component material-modal

Design the Modal’s Template

Now, open the material-modal.component.html file and add this HTML for the modal:

<h1 mat-dialog-title>Example Modal</h1>
<div mat-dialog-content>
  <p>This is a modal created with Angular Material.</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="closeModal()">Close</button>
</div>

Here’s what each part does:

• mat-dialog-title: The title of the modal
• mat-dialog-content: The main content area for any text, forms, or other Angular components
• mat-dialog-actions: A section for buttons like “Close” to control the modal

Add Modal logic in the component

Now let’s add the logic to control the modal. Open material-modal.component.ts and add this code:

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-material-modal',
  templateUrl: './material-modal.component.html',
  styleUrls: ['./material-modal.component.css']
})
export class MaterialModalComponent {

  constructor(public dialogRef: MatDialogRef<MaterialModalComponent>) {}

  closeModal(): void {
	this.dialogRef.close();
  }
}

The MatDialogRef service gives you control over the modal from within its component, and the closeModal() method will close the modal when the user clicks the button.

Trigger the Modal from a parent component

To display the modal, you’ll need to trigger it from a parent component.

In your parent component’s TypeScript file (e.g., app.component.ts), import MatDialog and use it to open the modal:

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MaterialModalComponent } from './material-modal/material-modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(public dialog: MatDialog) {}

  openModal(): void {
	this.dialog.open(MaterialModalComponent);
  }
}

In your parent component’s HTML file (e.g., app.component.html), add this button to trigger the modal:

<button mat-button (click)="openModal()">Open Modal</button>

Now, when you click the button, the modal will appear, and you can close it using the button inside the modal.

Test Your Modal

To test everything out, run your app with:

ng serve

Open your browser and navigate to http://localhost:4200/. Click the button, and your Angular Material modal should appear, working just as expected.

Exploring other libraries for Popups and Modals

While Angular Material is great, there are other libraries that might suit your needs depending on your project’s design or structure.

Here are a few worth exploring...

NG Bootstrap

This library provides Bootstrap components for Angular, including modals and popups. It’s perfect if you’re already using Bootstrap for your project.

You can install it with:

ng add @ng-bootstrap/ng-bootstrap

ngx-bootstrap

Another Bootstrap-based library that offers a variety of UI components. It’s lightweight and easy to integrate.

You can install it with:

npm install ngx-bootstrap --save

SweetAlert2

If you’re looking for visually stunning modals with lots of customization options, SweetAlert2 is a solid choice.

You can install it with:

npm install sweetalert2 ngx-sweetalert2

These libraries offer pre-built solutions, making it faster and easier to add popups and modals to your project. The right one for you depends on your project’s design and feature needs.

When Modals can hurt the User Experience

Modals are great for focusing your user’s attention, but they should be used with care. Overusing or misusing modals can actually lead to frustration and harm the overall user experience.

Let’s look at a few reasons why modals can sometimes be more trouble than they’re worth.

Issue 1. Disrupting user flow

Modals interrupt whatever the user was doing. That’s fine when used sparingly, like for confirming a crucial action, but frequent interruptions can frustrate your users. They may feel like they’re constantly being pulled away from what they’re focused on.

So, before adding a modal, ask yourself: does this action really need to stop the user in their tracks?

Issue 2. Accessibility issues

Not all modals are created with accessibility in mind, and that’s a big issue.

Users with disabilities, especially those using screen readers or keyboard navigation, can have a hard time interacting with modals that aren’t coded properly.

For instance, if your modal doesn’t trap focus or isn’t easy to navigate using a keyboard, some users could get stuck. Always ensure your modals are accessible by focusing on proper ARIA roles, focus management, and keyboard support.

Issue 3. Overwhelming the user

Modals should be simple and to the point. If you bombard your users with too many modals or load them with excessive information, they’re likely to close them without paying attention.

A cluttered or overwhelming modal defeats the purpose entirely, so keep things clear and concise. Less is more here.

Issue 4. Mobile compatibility

Modals can be tricky on mobile devices. If they aren’t responsive or their content is too large for the screen, users might find them difficult to navigate or close.

So always make sure any modal you use works seamlessly across all devices, especially mobile.

TL;DR

Modals are best when you need the user’s full attention for something important - like confirming a destructive action (think deleting data) or submitting a form.

They work well when you want to stop the user temporarily for something critical, but use them sparingly to avoid frustrating your audience.

So what’s next?

By now, you’ve got the know-how to build popups and modals in Angular, whether you prefer creating them from scratch or using a library like Angular Material.

You’ve also seen how popups are perfect for quick interactions and how modals can help when you need users to focus on something important.

The best approach depends on your project’s needs. If you’re after total customization, building your own components gives you that freedom. But when time is tight, or you need a quick solution, third-party libraries offer polished, ready-to-use options that still look great.

What’s next? It’s time to put these skills to work! Whether you’re adding interactive elements to an existing project or starting something new, you now have the tools to create engaging, user-friendly experiences that stand out.

Go ahead, give it a try. You’ve got this!

P.S.

Remember, if you struggle with any of the concepts in this guide, or want to take a deep dive into Angular, check out my complete Angular Developer course:

This is the only Angular course you need to learn Angular, build enterprise-level applications from scratch, and get hired as an Angular Developer.

Plus, once you join, you'll have the opportunity to ask questions in our private Discord community from me, other students and working professionals.

Not only that, but as a member - you’ll also get access to every course in the Zero To Mastery library!