Dialog Component — Angular (5) | Component
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.
