Angular 6 - Custom Modal Window / Dialog Box | Vijay Chauhan |
In this tutorial we'll cover how to implement modal windows (dialog boxes) in Angular 6 with TypeScript. The example is a custom modal without the need for any 3rd party libraries.
Edit Demo:
For the same example in Angular 2/5 check out Angular 2/5 - Custom Modal Window / Dialog Box.
The tutorial code is available on GitHub at
There are plenty of 3rd party libraries and plugins out there that include modal windows, and up until recently I used them myself when I needed to add a modal to a project. The main issue that I have with 3rd party libraries is that they usually contain a lot of features I don't need which adds unnecessary bloat to my application, so a while back I took the time to create a custom modal window in Angular 1 to see how difficult it would be and also to remove the mystery I had in my mind about exactly how modals work.
Once I'd finished I was surprised at the relatively small amount of code required to implement a custom modal window, most of the modal 'magic' is done with a handful of css styles (see the modal.less file) while TypeScript is just used for showing and hiding the modal windows.
Deme:
Demo with Edit
Doc:
Facebook -
GitHub -
LinkedIn -
Reddit -
Twitter -
Stackblitz: