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