a4-modal
Handle modal related tasks
Last updated 6 months ago by cccheng .
MIT · Original npm · Tarball · package.json
$ cnpm install a4-modal 
SYNC missed versions from official npm registry.

a4-modal

Angular 7 Modal

How-To

Install

npm install a4-modal

app.module.ts

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

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

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

app.component.ts

  1. Add viewContainerRef: ViewContainerRef to the constructor of app.component.ts.
...
import { ViewContainerRef } from '@angular/core';
...

constructor(private viewContainerRef: ViewContainerRef) { }

your.component.ts

  1. Add modalService: ModalService to the constructor of your component.
constructor(private modalService: ModalService) { }
  1. 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
  1. 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

  1. The service will automatically inject the modal component into your component.
  2. 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();
    }

    ...
}

Current Tags

  • 8.0.0                                ...           latest (6 months ago)

8 Versions

  • 8.0.0                                ...           6 months ago
  • 7.0.0                                ...           a year ago
  • 6.0.2                                ...           2 years ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.3 [deprecated]           ...           2 years ago
  • 0.0.1 [deprecated]           ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 3
Last Day 1
Last Week 2
Last Month 3
Dependencies (1)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |