ngns-simple-modal v0.0.1

NgNeosistModal

Simple Angular Bootstrap Modal Component

Installation

$ npm i -S ngns-simple-modal

Usage

Import NgnsSimpleModalModule in the root module

import { NgnsSimpleModalModule } from 'ngns-simple-modal';

@NgModule({
  imports: [
    NgnsSimpleModalModule
  ]
})

Example 1: Accessing the modal from the template

<button type="button" (click)="theModal1.open();">Open Modal 1</button>
<button type="button" (click)="theModal2.open();">Open Modal 2</button>

<ngns-simple-modal #theModal1>
  Modal test Content 1
</ngns-simple-modal>

<ngns-simple-modal #theModal2>
  Modal test Content 2
</ngns-simple-modal>

Example 2: Accessing the modal from parent component

@Component({
  selector: 'app-root',
  template: `

    <ngns-simple-modal #theModal1>
      Modal test Content 1
    </ngns-simple-modal>

    <ngns-simple-modal #theModal2>
      Modal test Content 2
    </ngns-simple-modal>
  `
})
export class AppComponent implements AfterViewInit {

  @ViewChild('theModal1') modal1: NgnsSimpleModalComponent;
  @ViewChild('theModal2') modal2: NgnsSimpleModalComponent;

  ngAfterViewInit() {
    this.modal1.open();
  }

  openModal2() {
    this.modal2.open();
  }
}  

Example 3: Accessing the modal from anywhere

@Component({
  selector: 'app-header',
  template: `
    <ngns-simple-modal id="theModal1">
      Modal test Content 1
    </ngns-simple-modal>

    <ngns-simple-modal id="theModal2">
      Modal test Content 2
    </ngns-simple-modal>
  `
})
export class HeaderComponent {
}

@Component({
  selector: 'app-root'
})
export class AppComponent {

  constructor(public ngnsModal: NgnsSimpleModalService) {
  }

  openModal1() {
    this.ngnsModal.open('theModal1');
  }

  openModal2() {
    this.ngnsModal.open('theModal2');
  }
}

NgnsSimpleModalComponent

<ngns-simple-modal [id]="'theModalId'" [title]="'theModalTitle'" [btnDoActionText]="'thePrimeryBtnText'" [btnCloseText]="'theCloseBtnText'" (modalOkAction)="doAction();" (modalClose)="onCloseAction();" (modalOpen)="onOpenAction();"></ngns-simple-modal>