ngx-basic-modal

ngx-basic-modal

Style-agnostic modals for Angular applications

How about styling?

This library is intended only to provide the modal main features which are:

1. Dynamically render a another component within a top level dialog
2. Provide the possibility to manage inputs and outputs of that component
3. Allow to retrieve a result when the modal is closed

Styling of the modal window is up to the developer.

Installation

To install this library, run:

$ npm install ngx-basic-modal --save

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import NgxModalModule
import { NgxModalModule } from 'ngx-basic-modal';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify it as an import and call .forRoot()
    NgxModalModule.forRoot()

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to use it

NgxModalService allows you to render a component inside a modal, with the possibility to retrieve an eventual result once the modal is closed.

You can follow the steps below to see how it works, or check out the playground folder of this repo.

Inject NgxModalService in the container component's constructor and use it as follows:

export class AppComponent {

  constructor(private modal: NgxModal) {}

  openModal() {

    const modal = this.modal.open(ModalContentComponent);

    // set inputs
    modal.componentInstance.exampleInput = 'hey i am a string';

    // listen for outputs
    modal.componentInstance.exampleOutput
      .subscribe(value => console.log('emitted', value));

    // retrieve the result when the modal it's closed
    modal.result.then(res => console.log('this is your result', res));

  }

}

In the component which will be the modal content inject NgxActiveModal to control the instance:

export class ModalContentComponent {

  @Input()
  exampleInput: string;

  @Output()
  exampleOutput = new EventEmitter();

  constructor(private activeModal: NgxActiveModal) {}

  closeMe() {
    this.activeModal.close('hey i am a result');
  }

}

Development

Contributions are welcome! Use pull requests to collaborate.

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Alessandro Mitelli