ngx-bootstrap-typed-modal
add typing to the NgbModal of @ng-bootstrap/ng-bootstrap
, this way you never loose your types when using modals!
I don't want to see any any
in my projects!
npm install ngx-bootstrap-typed-modal
Angular | ngx-bootstrap-typed-modal |
---|---|
17.x | 0.8.x |
16.x | 0.7.x |
15.x | 0.6.x |
14.x | 0.5.x |
const modalRef = new YesNoModalComponent().make(this.ngModal)
.setComponent(YesNoModalComponent) // component to place in the modal
.setTitle('Greetings') // title
.setInput({username: 'Bob'}) // pass inputs
.setSize('lg') // defined the size
.setForceMode(true) // if the user can dismiss by clicking on the background
.show(); // show the modal
modalRef.result.then(result => {
if(!result)
return
console.log(result.response)
})
Register the module.
app.module
:
//...
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgbModule, // should be present, if not install `@ng-bootstrap/ng-bootstrap`
// import the module
NgbTypedModalModule.forRoot()
// or can be configured with options
// NgbTypedModalModule.forRoot({
// customClass: 'my-custom-class',
// })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng generate component example-modal
in the generated component, extend the class with NgbTypedModal
:
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { NgbTypedModal } from 'ngx-bootstrap-typed-modal'; // <- import
// define input and output types
type DataInput = { message: string }
type DataOutput = { response: 'yes' | 'no' }
@Component({
selector: 'app-example-modal',
template: `
<h4>{{ data.message }}</h4>
<button class="btn btn-danger" (click)="onNoClicked()">No</button>
<button class="btn btn-success" (click)="onYesClicked()">Yes</button>
`
})
export class ExampledModalComponent extends NgbTypedModal<DataInput, DataOutput> implements OnInit {
constructor() {
super() // call the super constructor
}
ngOnInit(): void {
}
onYesClicked(): void
{
// emit the 'yes' response
this.submitData.emit({response: 'yes'})
}
onNoClicked(): void
{
// emit the 'no' response
this.submitData.emit({response: 'no'})
}
}
Open the modal
app.component
:
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ExampledModalComponent } from './example-modal.component';
@Component({
selector: 'app-root',
template: '<button (click)="onButtonClicked()">Open</button>'
})
export class AppComponent {
title = 'example-app';
constructor(
private ngModal: NgbModal // inject the NgbModal in the component
) {}
public onButtonClicked() {
// this build the modal with parameters
const modalRef = new ExampledModalComponent().make(this.ngModal)
.setComponent(ExampledModalComponent)
.setTitle('Greetings')
.setInput({ message: 'Hello World!' })
.show();
modalRef.result.then(result => {
if(!result)
return
console.log(result.response)
})
}
}
Access input data from the component.
public data: Input
Submit result and close the modal.
public submitData: new EventEmitter<DataOutput>()
Close the modal.
public submitClose: new EventEmitter<never>()
Create a builder used to create and configure your modal.
public make(ngModal: NgbModal): ModalBuilder<NgbTypedModal<Input, Output>, Input, Output>
Set the modal Title.
setTitle(title: string): ModalBuilder
Set the component to place in the modal body.
setComponent(component: Type<Component>): ModalBuilder
If false, the modal can be closed by clicking on the background. (default: false)
setForceMode(force: boolean = true): ModalBuilder
Set the modal size.
setSize(size: 'sm' | 'lg' | 'xl'): ModalBuilder
Set the modal input to pass to the component.
setInput(input: Input): ModalBuilder
Show the modal.
show(): NgbTypedModalRef<Component, Input, Output>
Get the output of the modal.
if the user dismiss
the modal (e.g: by clicking on the x
at the upper-right corner), result
will be set to null
.
result: Promise<O|null>
Store the modal state (should not be used).
componentInstance: {
component : Type<Component>
componentData: Input
modalData : ModalData
},
Pass custom configuration
{
customClass?: string|string[]
}