Custom Modal Popup with Parent Component in Angular 12

In this article, we will learn how to use Custom Bootstrap Modal from Parent Component on Button Click to child component.

For this, we will use Angular 12 and Ng-Bootstrap.

You have to follow these below steps,

Let’s Get Started

Step 1: Create New Angular Project, write below code in Cmd

ng new custom-modal-popup

Step 2: Add a new component 

ng g c custom-modal

Step 3: Add ng-bootstrap and Bootstrap

Here I have used ng-bootstrap for modal and Bootstrap for UI.

If you don’t know how to Add Bootstrap then click here. 

Install ng-bootstrap by adding this command into cmd

npm install --save @ng-bootstrap/ng-bootstrap

  Step 4: Paste the Below code in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomModalComponent } from './custom-modal/custom-modal.component';
import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    CustomModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [ NgbActiveModal],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import NgbModal by adding the below the line of code in app.component.ts

Here NgbModal is a service for opening modal windows.

import { NgbModal} from '@ng-bootstrap/ng-bootstrap';

Also, import NgbActiveModal in custom-modal.component.ts

Here NgbActiveModal is used For  .close() or .dismiss() the modal window used.

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

Step 5: For Bootstrap Modal  Add below HTML code  in custom-modalcomponent.html

<div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" (click)="activeModal.close('dismiss')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal"
        (click)="activeModal.close('close')">Close</button>
</div>

Step 6: Now, we will add a button in the parent component, so paste these into app.component.html.

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-lg btn-outline-primary" (click)="openModal()">Launch demo modal</button>
    </div>
  </div>
</div>

 To display the Modal Add below functionality  in app.component.ts

Here modalRef is a reference to the newly opened modal returned by the NgbModal.open() method.

closeModal: any;
constructor(public modalService: NgbModal) { }

openModal() {
  const modalRef = this.modalService.open(CustomModalComponent,
    {
      scrollable: true,
      windowClass: 'myCustomModalClass',
    });

  modalRef.result.then((result:any) => {
    console.log(result);
  }, (reason:any) => {
  });
}

To Modal close  Add below functionality in custom-modal.component.ts

constructor(
    public activeModal: NgbActiveModal
  ) { }
      ngOnInit(): void {
      }
     
      closeModal(message: string) {
        this.activeModal.close();
      }

Run your Angular Project.