0.1.6 • Published 4 years ago
@thirdwheel-studios/angular-modals v0.1.6
angular-modals
Lightweight library for creating modal dialogs in Angular.
The library provides support for simple Yes/No, Confirm, Warning and Error dialogs out of the box. Custom modal dialog components can be created by implementing the IModalDialog
interface. See Creating Custom Dialogs for more information.
Installation
npm install @thirdwheel-studios/angular-modals
Quickstart
- Import The
ModalModule
into your application, i.e.AppModule
.
import { ModalModule } from '@thirdwheel-studios/angular-modals';
@NgModule({
declarations: [],
imports: [ModalModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Insert a
tw-modal-container
component after your main component(s), i.e:
<my-app-component></my-app-component>
<tw-modal-container></tw-modal-container>
Alternatively, attach a tw-modal
directive to an existing component in your application, i.e:
<my-app-component tw-modal></my-app-component>
- Where required, inject
ModalService
into your components. i.e:
import { Component } from '@angular/core';
import { ModalService } from '@thirdwheel-studios/angular-modals';
@Component({
templateUrl: './some.component.html',
styleUrls: ['./some.component.scss']
})
export class SomeComponent {
constructor(private readonly modalService: ModalService) {
}
}
- Use the dialogs as follows:
this.modalService.yesNo('Do you really want to do this?')
.subscribe(yesDoItNow => {
if (yesDoItNow)
console.log('Okay then, if you insist');
});
this.modalService.confirm('We just did something')
.subscribe();
this.modalService.warning('This is not good')
.subscribe();
this.modalService.error('This is REALLY not good')
.subscribe();