Angular Typed Bootstrap Modal

ngx-bootstrap-typed-modal add typing to the NgbModal of @ng-bootstrap/ng-bootstrap, this way you never loose your types when using modals!

Why

I don't want to see any any in my projects!

Demo

Installation

npm install ngx-bootstrap-typed-modal

Examples

• Hello World Modal
• Yes No Modal

Versions

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

Usage

1const modalRef = new YesNoModalComponent().make(this.ngModal)
2  .setComponent(YesNoModalComponent) // component to place in the modal
3  .setTitle('Greetings')             // title
4  .setInput({username: 'Bob'})       // pass inputs
5  .setSize('lg')                     // defined the size
6  .setForceMode(true)                // if the user can dismiss by clicking on the background
7  .show();                           // show the modal
8
9modalRef.result.then(result => {
10  if(!result)
11    return
12
13  console.log(result.response)
14})

Getting Started

Register the module.

app.module:

1//...
2import { AppComponent } from './app.component';
3
4@NgModule({
5  declarations: [
6    AppComponent,
7  ],
8  imports: [
9    BrowserModule,
10    NgbModule,          // should be present, if not install `@ng-bootstrap/ng-bootstrap`
11
12    // import the module
13    NgbTypedModalModule.forRoot()
14
15    // or can be configured with options
16    // NgbTypedModalModule.forRoot({
17    //   customClass: 'my-custom-class',
18    // })
19  ],
20  providers: [],
21  bootstrap: [AppComponent]
22})
23export class AppModule { }

Generate a component

1ng generate component example-modal

in the generated component, extend the class with NgbTypedModal:

1import { Component }     from '@angular/core';
2import { OnInit }        from '@angular/core';
3import { NgbTypedModal } from 'ngx-bootstrap-typed-modal'; // <- import
4
5// define input and output types
6type DataInput  = { message: string }
7type DataOutput = { response: 'yes' | 'no' }
8
9@Component({
10  selector: 'app-example-modal',
11  template: `
12    <h4>{{ data.message }}</h4>
13    <button class="btn btn-danger" (click)="onNoClicked()">No</button>
14    <button class="btn btn-success" (click)="onYesClicked()">Yes</button>
15  `
16})
17export class ExampledModalComponent extends NgbTypedModal<DataInput, DataOutput> implements OnInit {
18
19  constructor() {
20    super() // call the super constructor
21  }
22
23  ngOnInit(): void {
24
25  }
26
27  onYesClicked(): void
28  {
29    // emit the 'yes' response
30    this.submitData.emit({response: 'yes'})
31  }
32
33  onNoClicked(): void
34  {
35    // emit the 'no' response
36    this.submitData.emit({response: 'no'})
37  }
38}

Open the modal app.component:

1import { Component }              from '@angular/core';
2import { NgbModal }               from '@ng-bootstrap/ng-bootstrap';
3import { ExampledModalComponent } from './example-modal.component';
4
5
6@Component({
7  selector: 'app-root',
8  template: '<button (click)="onButtonClicked()">Open</button>'
9})
10export class AppComponent {
11  title = 'example-app';
12
13  constructor(
14    private ngModal: NgbModal // inject the NgbModal in the component
15  ) {}
16
17  public onButtonClicked() {
18    // this build the modal with parameters
19    const modalRef = new ExampledModalComponent().make(this.ngModal)
20      .setComponent(ExampledModalComponent)
21      .setTitle('Greetings')
22      .setInput({ message: 'Hello World!' })
23      .show();
24
25    modalRef.result.then(result => {
26      if(!result)
27        return
28
29      console.log(result.response)
30    })
31  }
32}

API

NgbTypedModal

Access input data from the component.

1public data: Input

Submit result and close the modal.

1public submitData: new EventEmitter<DataOutput>()

Close the modal.

1public submitClose: new EventEmitter<never>()

Create a builder used to create and configure your modal.

1public make(ngModal: NgbModal): ModalBuilder<NgbTypedModal<Input, Output>, Input, Output>

ModalBuilder

Set the modal Title.

1setTitle(title: string): ModalBuilder

Set the component to place in the modal body.

1setComponent(component: Type<Component>): ModalBuilder

If false, the modal can be closed by clicking on the background. (default: false)

1setForceMode(force: boolean = true): ModalBuilder

Set the modal size.

1setSize(size: 'sm' | 'lg' | 'xl'): ModalBuilder

Set the modal input to pass to the component.

1setInput(input: Input): ModalBuilder

Show the modal.

1show(): NgbTypedModalRef<Component, Input, Output>

NgbTypedModalRef

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.

1result: Promise<O|null>

Store the modal state (should not be used).

1componentInstance: {
2  component    : Type<Component>
3  componentData: Input
4  modalData    : ModalData
5},

NgbTypedModalModuleConfig

Pass custom configuration

1{
2  customClass?: string|string[]
3}