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

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)
})

Getting Started

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 { }

Generate a component

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)
    })
  }
}

API

NgbTypedModal

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>

ModalBuilder

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>

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.

result: Promise<O|null>

Store the modal state (should not be used).

componentInstance: {
  component    : Type<Component>
  componentData: Input
  modalData    : ModalData
},

NgbTypedModalModuleConfig

Pass custom configuration

{
  customClass?: string|string[]
}