Including a Modal in your Angular App

Hey kids! Let's have a chat about adding cool stuff to your Angular application!! I was a tad perplexed trying to figure out how to add a modal to my application. In C#, it's kind of easy-peasy .... so, I tried to find a good way to add one easily.

No dice.

So while Googling and crying a little, I found a great article about a custom modal. As I read it ... I got really excited! It was exactly what I was looking for!!

Adding this modal was so super easy compared to the other options I found. This modal is also really easy to customize as needed.

The article is https://jasonwatmore.com/post/2020/09/24/angular-10-custom-modal-window-dialog-box

The codebase is https://github.com/cornflourblue/angular-10-custom-modal

EDIT: The below walkthrough is for Angular 12. If you are using 13+, please see my addendum article here for a few small changes you’ll need.

We'll go very quickly how to add this to your Angular project, but feel free to just go to the article yourself!!

I already had my Angular app up to date with the base installs I needed. So, let's assume you have the minimum 'Hello World' application running.

1) Copy the _modal folder from the codebase into my project, under the app folder

Ok, all set there. Just do a build to be sure your new files can be found.

2) Next, import the module into your application.

Go to your app.module.ts file (this is your overall app file, not a component file).

3) I wanted to have a separate component for my modal because I had a lot of information on it. It is giving instruction on how to use the site, so I wanted it separate. I created a new component called 'instructions'

instructions.component.ts

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

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

  }

4) You will need to import the ModalModule and functions into the .ts file of the component you want to use. I added my modal to my navigation bar.

import { Component } from '@angular/core';
import { ModalService } from '../_modal';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
  isExpanded = false;

  constructor(private modalService: ModalService) { }

  openModal(id: string) {
    this.modalService.open(id);
  }

  closeModal(id: string) {
    this.modalService.close(id);
  }
  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

5) Now we add the jw-modal element to the .html component you want to display the modal on (this example is the navigation component). Add a button and click event to open the modal. If you created a separate place for your modal data like I did, import the component using the selector name you gave your component (example here: app-instructions)

The important bits:

 <a class="nav-link"  (click)="openModal('custom-modal')">About</a>


<jw-modal id="custom-modal">
  <app-instructions></app-instructions>
  <button class="buttonChanges" (click)="closeModal('custom-modal');">Close</button>
</jw-modal>

And that is it! Run your application and you should see your modal open when you click your button.

All code can be copied directly from the original author's site here: https://jasonwatmore.com/post/2020/09/24/angular-10-custom-modal-window-dialog-box

Please visit to give Jason the traffic he deserves!

Enjoy!