Components

[Dialog Component — Angular (5)] Message Component

Creating the Message UI.

Dialog Component — Angular (5) | Message Component

On the previous article we have created the Message Model and Enum. So let's make the Message UI.

[Dialog Component — Angular (5)] Service

The service is the heart of the Dialog. It will give live to the Dialog component.

Dialog Component — Angular (5) | Service

[Dialog Component — Angular (5)] Backdrop

The backdrop is responsible to bring attention to the Dialog and also avoid the user to navigate on the website while the dialog is opened

[Dialog Component — Angular (5)] Component

Let's create the Dialog Wrapper that will make the dialog able to inject different and customisable dialogs mesages.

Dialog Component — Angular (5) | Models

The models we are going to create here is to keep the component organised and also give more support to the Dialog Component.

We are going to create the files IN BOLD below within the folder MODELS:

Get Ready!

Let's get the environment ready to start coding!

Dialog Component — Angular 5 | Get Ready!

Pre-requisite:

Node / Npm installed

Dialog Component — Angular (5) — Menu

Menu for the Dialog Component Articles!

Dialog Component — Menu

Home

Get Ready!

.. Models

Dialog Component — Angular (5)

TL;DR This is a step-by-step to create your own Dialog in Angular (5). You can walk through the steps to make it happen and understand a…