Creating Modals in Angular

Different methods and tools for building modals in Angular

Modals are one of the most common things you will see on any webpage. They are used from displaying additional info to implementing login/registration forms. They help to add extra web content to a page when the page is already heavy with HTML elements. We see modals on Twitter when we want to comment on a tweet. On Facebook when we want to comment on a post.

Modals are easy to implement even in vanilla JS/HTML app. With the emergence of JS frameworks, the frameworks also have provided an easy way for us to still use modals in their framework because we just can’t do away with it. Most popular CSS frameworks

Material Design

Bootstrap

Semantic UI

Tailwind

have implemented Modals/Dialogs to a very high degree that we can seamlessly incorporate them into our app.

So in this post, we will see how to create Modals in Angular. First, we install tools that we will need.

Tip: Use Bit to collaborate on Angular components for faster development and more consistent UI/UX

Use Bit to share, install and collaborate on individual Angular components. Stop wasting time configuring packages, managing multiple repositories or maintaining cumbersome monorepos.

Check out this Angular (reusable) modal component:

Angular modal component: Install with NPM or import and develop using Bit

Environment Setup

Development in Angular uses the Node environment to work. So we will download and install dependencies and software we need:

Nodejs This is the main software we will need. If you don’t have it installed on your machine, go to Nodejs Page and download the binary meant for your machine OS

NPM This is the most widely used Node Package manager in the world right. You don’t have to install it separate it comes with the Nodejs binary.

ng CLI This is an NPM CLI tool for scaffolding of Angular projects. To install it, run the below command:

npm i @angular/cli -g

Modals in Angular

We will create a component that will contain the markup that we want to be rendered as a modal.

<modal>

<h1>Modal title</h1>

<div class="body">

Modal body

</div>

</modal>

The content or markup we want to be in modal will be placed between the element. The modal component will look like this:

@Component({

selector: 'modal',

template: `

<div class="mmodal">

<div class="mmodal-body">

<ng-content></ng-content>

</div>

</div>

<div class="mmodal-background"></div>

`,

styleUrls: ['./modal.component.css']

})

export class ModalComponent implements OnInit { constructor(private el: ElementRef) { } ngOnInit() {

// we added this so that when the backdrop is clicked the modal is closed.

this.el.nativeElement.addEventListener('click', ()=> {

this.close()

})

} close() {

this.el.nativeElement.classList.remove('sshow')

this.el.nativeElement.classList.add('hhidden')

}

}

This is our modal component. We injected the ElementRef class so we can have access to the component’s DOM in the browser. With reference to its DOM we can manipulate its visibility. See that we are using ng-content to project the children elements between the div.class="mmodal-body" element.

We have a few CSS classes: mmodal , mmodal-body and mmodal-background , hhidden , sshow .

The CSS mmodal holds style that defines the basic structure of our modal. sshow makes the modal component visible. hhidden makes the modal component invisible. mmodal-background covers the background elements whenever the modal shows so as to prevent the user from interacting with them when the modal is open.

Let’s look at the CSS:

// this makes the .modal visible

.sshow {

display: block;

} // this makes the element hidden/invisible

.hhidden {

display: none;

} // this holds the CSS display of the modal

.mmodal {

// makes it hover above all elements

z-index: 1000;

position: fixed;

top: 30px;

bottom: 0;

left: 300px;

width: 500px;

} .mmodal-body {

background: #fff;

margin: 40px;

padding: 20px;

} // backdrop color

.mmodal-background {

// should be below the .modal but above all other elements

z-index: 900;

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: #000;

// makes the below elements visible to a degree.

opacity: 0.95;

}

Now, let’s create a component we will place a nodal on:

ng g showmodal @Component({

selector: 'app-showmodal',

template: `

<button (click)="showDialog()">Open Dialog</button> <modal id="modal_1" class="hhidden">

Dialog Header

<button>Close Dialog</button>

</modal>

`,

style: []

})

export class ShowModalComponent {

showDialog(){

let modal_t = document.getElementById('modal_1')

modal_t.classList.remove('hhidden')

modal_t.classList.add('sshow');

}

closeDialog() {

let modal_t = document.getElementById('modal_1')

modal_t.classList.remove('sshow')

modal_t.classList.add('hhidden');

}

}