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!

Get Thiago Bernardes’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Backdrop Component (TS)

Yes, it's just a blank component :)

./src/app/components/backdrop/backdrop.component.ts

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

./src/app/components/backdrop/backdrop.component.scss

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

<< Previos = MENU = Next>>