Other versions available:

• Angular:  Angular 9,  8,  7,  6,  2/5
• React:  React
• AngularJS:  AngularJS

In this tutorial we’ll cover how to implement modal windows (dialog boxes) in Angular 10. The example is a custom modal without the need for any extra 3rd party plugins.

The tutorial code is available on GitHub at  https://github.com/cornflourblue/angular-10-custom-modal.

There are plenty of plugins and libraries out there that include modal windows but they can add unnecessary bloat to an Angular app, so a while ago I took some time to implement a custom modal window to see how difficult it would be and also to remove the magic & mystery I had in my mind about exactly how modals work. I was surprised at the relatively small amount of code required to implement a modal window, most of the ‘magic’ is done with a handful of styles in the  modal.component.less stylesheet, while Angular is just used for showing and hiding the modal windows.

#angular #angular 10