Angular 2/4/5/6/7-Reusable Custom Bootstrap Modal Dialog Angular Component(3 ways)

//step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap

main.module.ts

import { NgbModalModule } 
from '@ng-bootstrap/ng-bootstrap/';
import { ModalComponent} from 
'/modal-dialog.component';
@NgModule({
declarations:[ModalComponent],
imports: [
NgbModalModule.forRoot()
]
})
modal-dialog.component.ts
import { Component, Input, 
Output, EventEmitter } from '@angular/core';

import { NgbModal } from 
'@ng-bootstrap/ng-bootstrap/modal/modal.module';@Component({
    selector: 'modal-dialog',
    template: `
<div class="confirm"  
[handle]="modalHandle" *ngIf="show" ngDraggable>
<div class="modal-dialog" >
 <div class="modal-content">
  <div class="modal-header cursor" #modalHandle>
    <button type="button" class="close" data-dismiss="modal" 
    (click)="closePopUp()" aria-hidden="true">×</button>
     <h4  *ngIf="!isAlert" 
    class="modal-title">Confirmation</h4>
      <h4   *ngIf="isAlert"
     class="modal-title">Information</h4>
      </div>

     <div *ngIf="!isAlert" >
      <div  class="modal-body">
       <div *ngIf="isWarning"  class="form-group has-error">
         <label class="control-label" >
           {{warningMessage}}
      </label>
                </div>
                <p >{{infoMessage}}</p>
            </div>
         
            <div class="modal-footer">
                <button type="button"
               class="btn btn-default" (click)="closePopUp()"
              ng- data-dismiss="modal">Cancel</button>
                <button type="button"
          class="btn btn-primary" (click)="confirm()" 
        >Confirm</button>
            </div>
            </div>
            <div *ngIf="isAlert" >
            <div class="modal-body">

                <p>{{infoMessage}}</p>
            </div>
            <div class="modal-footer">               
                <button type="button"
      class="btn btn-primary" 
   (click)="closePopUp()" >Ok</button>
            </div>
            </div>
        </div>
    </div>
</div>
`

})
export class ModalComponent {
    @Input() show: boolean = false;
    @Output() confirmation = new EventEmitter();
    @Output() close = new EventEmitter();
    @Input() isAlert: boolean = false;
    @Input() infoMessage ="";
    @Input() warningMessage ="";
    @Input() isWarning=false;
    constructor() { }
    closePopUp() {
        this.close.emit(false);
    }
    confirm() {

        this.confirmation.emit(false);
    }
}
modal.component.html
<div>
<input type="button" 
(click)="openAlert();" value="Confirm with ALert Button">
<input type="button" 
(click)="openConfirm();" value="Confirm Button">
<input type="button" 
(click)="openInfo()" value="Info Button">
</div>
<modal-dialog 
(close)="cancelAlert($event)" 
[infoMessage]="'Are you sure you want to 
delete this record?'" 
(confirmation)="confirmAlert($event)"
[isWarning]="true" 
[warningMessage]="'This will be your
 warning highlighted in red!'"
[show]="showAlert"></modal-dialog>
 <modal-dialog 
 (close)="cancelConfirm($event)" 
 (confirmation)="askConfirm($event)"
 [infoMessage]="'Are you sure you want to proceed?'"
[show]="showConfirmation"></modal-dialog>
<modal-dialog 
(close)="closePopUp($event)"
 [infoMessage]="'This is your information!'"
 [isAlert]="true" [show]="showInfoPopUp"></modal-dialog>

sample.component.ts
 @Component({

    templateUrl: './modal.component.html'
})
export class MdoalDialogComponent implements OnInit {
showAlert:boolean = false;
showConfirmation:boolean = false;
showInfoPopUp:boolean=false;
ngOnInit(){

}
openAlert(){
this.showAlert = true;
}
//the confirmation event will be 
emitted from the modal dialog component

confirmAlert(confirmation){
this.showAlert = confirmation;
//your operation after confirmation goes here;
}
//close event will b emitted from 
modal dialog component
cancelAlert(close){
this.showAlert = close;
}

openConfirm(){
this.showConfirmation = true;
}

//the confirmation event will be emitted
 from the modal dialog component
askConfirm(confirmation){
this.showConfirmation = confirmation;
//your operation after confirmation goes here;
}

//close event will b emitted from 
modal dialog component
cancelConfirm(close){
this.showConfirmation = close;
}

openInfo(){
this.showInfoPopUp = true;
}
//close event will b emitted from 
modal dialog component
closePopUp(close){
this.showInfoPopUp = close;
}

}