Dialog Component — Angular (5) | Core Module

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

On the previous article we have created the Dialog Module, which is responsible to wrap the whole Dialog Component, Services and Models. So now, we are going to create the Core Module.

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

--

--

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