a4-modal

a4-modal

Angular 7 Modal

How-To

Install

npm install a4-modal

app.module.ts

• Add ModalModule to imports of the app.module.ts.

...
import { ModalModule } from 'a4-modal';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    ModalModule,
    ...
  ],
  ...
})

app.component.ts

• Add viewContainerRef: ViewContainerRef to the constructor of app.component.ts.

...
import { ViewContainerRef } from '@angular/core';
...

constructor(private viewContainerRef: ViewContainerRef) { }

your.component.ts

• Add modalService: ModalService to the constructor of your component.

constructor(private modalService: ModalService) { }

• Invoking the modal can be done by using the service as shown below.

this.modalService.open(MyModalContentComponent)
    .then(p=> console.log(p)) // the result of the modal
    .catch(p=> console.error(p)); // when route changes

• MyModalContentComponent will be dynamically created by the modal service. You will need to add MyModalContentComponent to the entryComponents in your module.

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ...
    ],
    entryComponents: [
        MyModalContentComponent
    ]

my-modal.component.ts

• The service will automatically inject the modal component into your component.
• Add the following code to your modal component.

...
import { ModalComponent, IModal } from 'a4-modal';
...

export class MyModalComponent implements IModal {
    ...
    modal: ModalComponent;
    ...

    closeModal() {
        this.modal.close();
    }

    ...
}