Modal
Dynamic modals and dialogs.
Unfinished Docs
need to finish the docs:
- pass data to the rendered modal components
- force component by adding modal components to "entryComponents" in @NgModule
- docs for the dialog service
Install
Install the component:
npm install @geocompy/angular-modal --save
Add the ModalModule to your root module:
import { NgModule } from '@angular/core';
import { ModalModule } from '@geocompy/angular-modal';
@NgModule({
imports: [
ModalModule
]
})
export class RootModule {}Add the <modal> component to your app (this is your modal outlet):
import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<div>This is the app</div>
<modal></modal>
`,
})
export class AppComponent {}Open Modal
There's a couple things to keep in mind:
- The ModalComponent is controlled by the ModalService (so you can access it from anywhere)
- The ModalService requires that a component be passed to it
import { Component } from '@angular/core';
import { SomeComponent } from './some.component';
import { ModalService } from '@geocompy/angular-modal';
@Component({
selector: 'example',
template: `
<button (click)="open()">Open Some Modal</button>
`
})
export class ExampleComponent {
constructor(private modalService: ModalService) {}
open() {
let modalObservable = modalService.open(SomeComponent);
modalObservable.subscribe(
next => console.log('modal submit'),
err => console.log('modal cancel')
);
}
}Control Modal
Create a component for use from within the modal:
import { Component, Input } from "@angular/core";
import { ModalService } from "@geocompy/angular-modal";
@Component({
template: `
<div>
<div class="modal__header">
Confirm This Thing
</div>
<div class="modal__body">
This is where you confirm the thing.
</div>
<div class="modal__footer">
<button class="btn btn--primary" (click)="confirm()">Confirm</button>
<button class="btn btn--accent" (click)="cancel()">Cancel</button>
</div>
</div>
`
})
export class TestModalComponent {
constructor(private modalService: ModalService) {}
confirm() {
this.modalService.submit('submitted');
}
cancel() {
this.modalService.cancel('cancelled');
}
}