Dialog Component — Angular (5) | Models

The models we are going to create here is to keep the component organised and also give more support to the Dialog Component.

We are going to create the files IN BOLD below within the folder MODELS:

.. src
.. .. app
.. .. .. components
.. .. .. .. 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

Below on each snippet, has the full path where the file needs to be created

Let's go into each of those files :)

Dialog Options
The DialogOptionsModel allow us to extend properties that can make the Dialog very flexible, such as:
- backdrop: include the backdrop below the dialog
- closeOutsideClick: allow the user to click anywhere but the dialog, to close it.
- top: Position that the dialog will be from the top of the screen
- data: Which data we will send to Modal, so it can get customizable

./src/app/components/models/dialog-options.model.ts

Note that the class is a Generic class, where T will be the type of the data property that will be shared on the component body.

Dialog Active
The DialogActiveModel is responsible for the events within the dialog. On this example, we have the following:
- close: When the user click on close, and the dialog can be customised with some data to send to the method
- dismiss: When the user click out side of the dialog, if it's allowed by the options above.

./src/app/components/models/dialog-active.model.ts

Dialog Content Ref

The DialogContentRefModel is related to the modal component itself. It will be used to inject it into the HTML.

./src/app/components/models/dialog-content-ref.model.ts

Dialog Ref
The DialogRefModel will be responsible to handle the behaviour within the Dialog Reference. The explanations are in the code as a comment:

./src/app/components/models/dialog-ref.model.ts

Models
On TypeScript, I like creating an Index file, so it will help to import the modules.

./src/app/components/models/index.ts

For example, rather then:
import { DialogActiveModel } from ‘../components/models/dialog-active.model.ts';
import { DialogOptionsModel } from ‘../components/models/dialog-options.model.ts';

I can do this:

import { DialogActiveModel, DialogOptionsModel } from ‘../components/models';

It's better, hey ?! :)

So those are the Models that will support our component. So let's now create the DialogComponent.

<< Previous= MENU = Next>>