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

And let's give some style to our HTML

And then, create the Message Component logical:

That's was ease hey?! So let's create the Service on the following article.

<< Previous = MENU = Next >>

[Dialog Component — Angular (5)] Message Component was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Message Service is the one that you will be using across your project. So whenever you need to invoke the message, you are going to inject it on the component`s constructor and call the proper method (for now we are doing only the alert)

Yep! We are nearly done, so let's import it to the Core Module to make it available to the project on the next article.

<< Previous = MENU = Next >>

Dialog Component — Angular (5) | Message Service was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

The MessageTypeEnum is an enumerator that will define the type of the message:

The MessageModel is the one responsible for the Dialog Content. On this example we will only send to the component the property message, but you can extend it to send Title, Buttons and so on…

So let's move to the Message Component on the next article.

<< Previous = MENU = Next >>

Dialog Component — Angular (5) | Message Model was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the app.module.ts (generated by the ng-cli) we have the following import

…
imports: [
BrowserModule
],
…

then, we will need to import the core.module and add it into the imports

…
import { CoreModule } from ‘./core.module’
…
imports: [
BrowserModule,
CoreModule.forRoot()
],
…

This step will make our CorModule a Singleton, so when the project is started, it will be loaded once and enable all the solution to use this instance, even the lazy modules.

Ok ok, maybe you are anxious to see it on action. Well, I am lol, so let go to the finals steps.

Recap, we have built our Dialog Component. As you could notice along the tutorial, the Dialog Component ia a generic component that will handle the behaviour for the user actions, and mainly, be able to the developer extend and have multiple king of Dialogs in one project. For example, you can have an Error Dialog, an Alert Dialog or also a Confirmation Dialog.

On the next article, we will be creating the Message Service! I will be covering on how to create the Alert Dialog, and as a homework you can extend it to an Error Dialog and also Confirmation Dialog (I'll be here if you need any help, but I encourage you to do it on your own to evolve your developer logical).

As the hardest code is done, the following will be quick and easy :) so let's do it on the next article!

<< Previous = MENU = Next >>

Dialog Component — Angular (5) | Consuming the Dialog Component was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Core Module has it's name as a Angular Convention for its responsibility. It will sit beside of the app.module.ts on your application and it will be inject into the app.module.ts.

The vantage of the Core Module is to make components available for the whole project! So be careful, only add modules in Core Module once, and also if it's going to be used across the whole project (e.g. our Dialog Component — all pages might need to use it). We will create the Core Module to be a Singleton, so let's code it!

As per the following structure, the Core Module will be sitting beside of the App Module.

.. src
.. .. app
.. .. .. components
.. .. .. .. backdrop
.. .. .. .. .. backdrop.component.scss
.. .. .. .. .. backdrop.component.ts
.. .. .. .. dialog
.. .. .. .. .. dialog.component.html
.. .. .. .. .. dialog.component.scss
.. .. .. .. .. dialog.component.ts
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. .. services
.. .. .. .. .. dialog.service.ts
.. .. .. .. dialog.module.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. .. app.component.ts
.. .. .. app.module.ts
.. .. .. core.module.ts

On the next article we are going to make it available on the App Module! Let's go…

<< Previous = MENU = Next >>

Dialog Component — Angular (5) | Core Module was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ok! On the previous article we have finished our Dialogo Component, however we need to put it all together to make it available to the project.

The Module is responsible to stitch up all together, so you will need only to import the module, and it's imports everything else. So let's build the Module.

Dialog Module

The project file's struct will look like this:

.. src
.. .. app
.. .. .. components
.. .. .. .. backdrop
.. .. .. .. .. backdrop.component.scss
.. .. .. .. .. backdrop.component.ts
.. .. .. .. dialog
.. .. .. .. .. dialog.component.html
.. .. .. .. .. dialog.component.scss
.. .. .. .. .. dialog.component.ts
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. .. services
.. .. .. .. .. dialog.service.ts
.. .. .. .. dialog.module.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. .. app.component.ts
.. .. .. app.module.ts
.. .. .. core.module.ts

On the next article, we will import the Dialog Module and make it available in the whole project.

<< Previous = MENU = Next >>

[Dialog Component — Angular (5)] Module was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

Well, up to now we have just prepare our Dialog to have some live. On the previous article we have created our backdrop for the Dialog, and now we will create the Service, that will orchestrate all the previous components and models we have created.

The Dialog Service is the heart of our Dialog Component. It will be responsible to orchestrate the whole dialog, and on your project, it will be the only service that you will be calling to invoke the Dialog, so let's do a heavy work on this one!

Up to now, we have the following file structure:

.. src
.. .. app
.. .. .. components
.. .. .. .. backdrop
.. .. .. .. .. backdrop.component.scss
.. .. .. .. .. backdrop.component.ts
.. .. .. .. dialog
.. .. .. .. .. dialog.component.html
.. .. .. .. .. dialog.component.scss
.. .. .. .. .. dialog.component.ts
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. .. services
.. .. .. .. .. dialog.service.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. .. app.component.ts
.. .. .. app.module.ts

Dialog Service

Yeah! That's was big one! I hope I could be as clearer as I wished to give you more detail about it. Maybe it has too much information, but do not hesitate to drop me a message or even ask the community for help.

And finally, we are goind to stich up all together on the next article, creating the Dialog Module.

<< Previous = MENU = Next>>

[Dialog Component — Angular (5)] Service was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

On the previous article we developed the Dialog Component. So now, we are going to create the optional backdrop that will be on the back of the dialog.

Even being optional, the backdrop has 2 important role:

• Avoid the user to click or navigate on the website while the Dialog message is opened
• Stand out the message to the user take an action

Below you will find the files structure for the Backdrop Component:

.. src
.. .. app
.. .. .. components
.. .. .. .. backdrop
.. .. .. .. .. backdrop.component.scss
.. .. .. .. .. backdrop.component.ts
.. .. .. .. dialog
.. .. .. .. .. dialog.component.html
.. .. .. .. .. dialog.component.scss
.. .. .. .. .. dialog.component.ts
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. .. app.component.ts
.. .. .. app.module.ts

Let's do it!

Backdrop Component (TS)

Yes, it's just a blank component :)

Backdrop Component (SCSS)

Here you will make the backdrop have some color. So you can customise it as you wish, so you can have a white backdrop, or any other color you wish. On this example we will have a black one.

Note: It's nice to give some transparency for the backdrop, on this example we are making the black on 0.7 opacity ;)

This one was easy hey?! So the next article is the heart of our our component, the Service! Let's go…

<< Previos = MENU = Next>>

[Dialog Component — Angular (5)] Backdrop was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

So now that we've created all the Modules that will support the application on the previous article, let's prepare the Dialog Component.

The component it's simple, as it will contain only the logic of the wrap. As you can see below on the dialog.component.html, it contain a ng-content tag, so when you will use the component's service, it will inject your customised content within this tag.

In resume, the Dialog Component will handle the behaviours and also the style of the wrapper. For the component, you will have the following structure on your project:

.. src
.. .. app
.. .. .. components
.. .. .. .. dialog
.. .. .. .. .. dialog.component.html
.. .. .. .. .. dialog.component.scss
.. .. .. .. .. dialog.component.ts
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. .. app.component.ts
.. .. .. app.module.ts

Let's have a look on the code below:

Dialog Component (TS)

Dialog Component (SCSS)

The style is very simple. So the :host will expand the dialog on the screen and the .dialog class will centralise the dialog object.

Dialog Component (HTML)

And this is the component itself, it's just a wrapper where the customised component will be injected.

On this article we learned how to create the Dialog component, which is a wrapper that will allow you to inject different's dialogs within this structure.

On the next article, we are going to create the Dialog Backdrop, which is optional depending on your configuration when calling the Dialog.

<< Previous = MENU = Next >>

[Dialog Component — Angular (5)] Component was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

.. src
.. .. app
.. .. .. components
.. .. .. .. models
.. .. .. .. .. dialog-active.model.ts
.. .. .. .. .. dialog-content-ref.model.ts
.. .. .. .. .. dialog-options.model.ts
.. .. .. .. .. dialog-ref.model.ts
.. .. .. .. .. index.ts
.. .. .. app.component.html
.. .. .. app.component.scss
.. .. ..app.component.ts
.. .. ..app.module.ts

Below on each snippet, has the full path where the file needs to be created

Let's go into each of those files :)

Dialog Options
The DialogOptionsModel allow us to extend properties that can make the Dialog very flexible, such as:
- backdrop: include the backdrop below the dialog
- closeOutsideClick: allow the user to click anywhere but the dialog, to close it.
- top: Position that the dialog will be from the top of the screen
- data: Which data we will send to Modal, so it can get customizable

Note that the class is a Generic class, where T will be the type of the data property that will be shared on the component body.

Dialog Active
The DialogActiveModel is responsible for the events within the dialog. On this example, we have the following:
- close: When the user click on close, and the dialog can be customised with some data to send to the method
- dismiss: When the user click out side of the dialog, if it's allowed by the options above.

Dialog Content Ref

The DialogContentRefModel is related to the modal component itself. It will be used to inject it into the HTML.

Dialog Ref
The DialogRefModel will be responsible to handle the behaviour within the Dialog Reference. The explanations are in the code as a comment:

Models
On TypeScript, I like creating an Index file, so it will help to import the modules.

For example, rather then:
import { DialogActiveModel } from ‘../components/models/dialog-active.model.ts';
import { DialogOptionsModel } from ‘../components/models/dialog-options.model.ts';

I can do this:

import { DialogActiveModel, DialogOptionsModel } from ‘../components/models';

It's better, hey ?! :)

So those are the Models that will support our component. So let's now create the DialogComponent.

<< Previous= MENU = Next>>

Dialog Component — Angular (5) | Models was originally published in Dialog Component Angular (5) on Medium, where people are continuing the conversation by highlighting and responding to this story.