Modals

As a modal we understand a content that should be rendered in form of a window/view above existing page's content (blocking any interaction with this page).

Preview

Sources

The main goals of this tool is to provide functionality for fast and easy management of modals that allows to:

• open any modal
• replace modal with another one
• close currently active modal, like also opened but inactive modals

Implementation

NgOP provides you:

• Main service called OpModalsService. Through this service you will be able to open, close and replace your modals.
• Overlay that will block the page while any modal is being opened

Requirements on your side

• Define how modals should look like and how they should be loaded (lazy loading is supported). Also check out placeholders to learn more.

Limitations

• This plugin does not support url changes.

caution

Detecting url change while a modal is opened will result in closing all active modals.

Modals module

To use modals you just need to import OpModalModule which will give you access to OpModalService that manages all modals.

caution

Modules plugin depends on angular router so you will also need to make sure that RouterModule is properly imported.

@NgModule({
    imports: [
        ...
        OpModalModule,
    ],
})
export class AppModule {}

Modals container component

To be able to open modals you need to use <op-modals></op-modals> within your application. This will be a place where modals will be instantiated.

Main modals container

We recommend to use it as a last element within you application's root component. This way you will create the default initialisation point for all your modals.

Local modals container

It is also possible to create modal container for a specific component. This way you will create local initialisation point of your modals. You can create as many local containers as you want.

...

Modals wrapper

We do not want our content components to be aware of how they are going to be used (in this case as modals). NgOP separates this concern by introducing modal wrappers, which are simple components that encapsulate content components giving them proper modal look and functionality.

This way we will be able to use content components in other parts of the aplication.

Let's create simple modal wrapper component which will be used as default one whenewer modal will be opened.

import { OpWrapper } from 'ngop/core';

@Component({
    template: '<ng-container op-content></ng-container>',
})
export class DefaultModalWrapperComponent extends OpWrapper {}

op-content directive tells NgOP where to insert content component.

Now we will need to add it to OpCoreModule.froRoot() configuration:

OpCoreModule.forRoot({
    modals: {
        default: DefaultModalWrapperComponent,
    },
})

We can also add other container components and assign them different names. Let's assume we have a component called CustomModalComponent. We can assign it to name "custom".

OpCoreModule.forRoot({
    modals: {
        default: DefaultModalComponent,
        custom: CustomModalComponent,
    },
})

Now when you will be opening modals you will be able to specify which of those container components should NgOP use.

...

Showing content as a modal

After everything is setup we can use OpModalsService to open a modal. We will assume that we have a component called ModalContentComponent which will contain content we want to show.

@Injectable()
export class SomeInjectable {

    constructor(service: OpModalsService) {
        service.open({
            component: ModalContentComponent,
        });
    }
}

Showing lazy loaded content as a modal

Plugin also supports opening widgets as modals.

@Injectable()
export class SomeInjectable {

    constructor(service: OpModalsService) {
        service.openLazy({
            module: () => import('path-to-widget-modal'),
        });
    }
}

Lazy loaded modals

Plugin supports two main scenarios of opening modals:

1. when you loaded your module via router's loadChildren or directly via import() and you want to open modal from this lazy loaded content
2. When you want to directly open a modal that should be lazily loaded

Modals from lazy loaded modules

In case you are loading your modules through router's loadChildren or dynamically with import() you still can use OpModalsService to open your modals.

In fact it does not matter is you are opening your modal from main or lazy loaded code, the way you do it will be the same, by using OpModalsService.open() method.

Check out this example to see the details.

Lazy loaded module as a modal

...