Dialog Component — Angular (5) | Service

Thiago Bernardes
Dialog Component Angular (5)
2 min readJan 21, 2018

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

./src/app/components/services/dialog.service.ts

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>>

--

--

Thiago Bernardes
Dialog Component Angular (5)

Focused on Human-Centered Design & working collaboratively with different areas, I combine the IT background with UX experience to create innovative solutions