How to make a Modal reusable in Angular 2?

Question

Reusability is very important when programming, and anything we can do to reduce duplication of code is going to help us out.

I have to use Modal popups to display information to users in many places in my Angular 2 project. I am using ng-bootstrap and all of these Modals have the same Header and Footer but body changes in many cases. Sometimes the body just wanted to replace a single place holder, at other times it has some complexity to prepare the dynamic content. And these are triggered or managed by different components.

ng-bootstrap allow us to pass content into a Modal in two ways.

as a Template. here wrap the whole Modal html in
as a Component

With the first approach, I have to write the header, body and footer repeatedly per modal.

With the second approach, I can wrap the HTML inside a component but need to put placeholders to make it dynamic. so then I can pass values as follows

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

But the flexibility is still limited.

What I am trying to achieve is to make a reusing modal component with Content Projection [Transclusion]

So, in my Common Modal's body looks as below. I placed as a slot for the Modal's body.

  @Component({
  selector: 'common-modal',
  template: `
  
  
  
    
      
        {{title}}
        
      
      
        
      
      
        
      
    
  
  
  `,

Now I wish I could use it as bellow.


  Welcome Jasnan!

And at some other place

   
     //......
      
        
          {{student.name}}
        
        
          {{student.grade}}
        
      
     //......

How can I make this? Is there a way to do this in ng-bootstrap? Thanks for helping me to figure this out.

user_2202748 · Answer

The best solution so far is to create a custom reusable modal component and modal service in a shared module (where the component and service is exported), so that it can be used in any other module where shared module is imported

shared.module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    ModalComponent,
  ],
  providers:[ 
    ModalService
   ],
  exports:[
    ModalComponent
  ]
})

modal.component.html

modal.component.ts

import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';
import { ModalService } from '../services/modal.service';
import { element } from '@angular/core/src/render3';

@Component({
  selector: 'custom-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit, OnDestroy {
  @Input() id: string;
  private element: any;

  constructor(private modalService: ModalService, private el: ElementRef) {
      this.element = el.nativeElement;
  }

  ngOnInit(): void {
      let modal = this;

      // ensure id attribute exists
      if (!this.id) {
          console.error('modal must have an id');
          return;
      }

      // move element to bottom of page (just before ) so it can be displayed above everything else
      document.body.appendChild(this.element);

      // close modal on background click
      this.element.addEventListener('click', function (e: any) {
          if (e.target.className === 'modal__overlay modal__overlay--toggle') {
              modal.close();
          }
      });

      this.element.addEventListener('click', function (e: any) {
        if (e.target.className === 'model-close-btn' || e.target.className === 'close-image' ) {
            modal.close();
        }
    });

      // add self (this modal instance) to the modal service so it's accessible from controllers
      this.modalService.add(this);
  }

  // remove self from modal service when directive is destroyed
  ngOnDestroy(): void {
      this.modalService.remove(this.id);
      this.element.remove();
  }

  // open modal
  open(): void {
    //console.log(this.element);
      this.element.style.display = 'block';

  }

  // close modal
  close(): void {
      this.element.style.display = 'none';
  }
}

modal.component.scss

/* MODAL STYLES
-------------------------------*/
:host(custom-modal) {
  /* modals are hidden by default */
  display: none;

}

.custom-modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  display: block !important;
}

.model-close-btn {
  position: fixed;
  width: 18px;
  height: 18px;
  right: 50px;
  top: 50px;
  z-index: 9999;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;

  img {
    width: 18px;
  }
}

modal.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  private modals: any[] = [];

  constructor() { }

  add(modal: any) {
    // add modal to array of active modals
    this.modals.push(modal);
  }

  remove(id: string) {
    // remove modal from array of active modals
    this.modals = this.modals.filter(x => x.id !== id);
  }

  open(id: string) {
    // open modal specified by id
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.open();
  }

  close(id: string) {
    // close modal specified by id
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.close();
  }

}

Now if you want to use this component in a sample component in another module , do the following:

Step 1: Import the shared module to the sample module where you want to use the custom-modal

sample.module.ts

@NgModule({
  declarations: [
    SampleComponent,
  ],
  imports: [
    SharedModule
  ],
})

Step 2:

sample.component.ts

  import { ModalService } from 'src/shared/services/modal.service';


  constructor(private modalService: ModalService){}

  //  call this function to open modal by passing modal id
  openModal(id: string) {
    this.modalService.open(id);
  }

  // just call this function to close modal by passing modal id
  closeModal(id: string) {
      this.modalService.close(id); 
  }

sample.component.html


  

   // add your any custom modal template code here and logic in sample.component.ts

How to make a Modal reusable in Angular 2?

What I am trying to achieve is to make a reusing modal component with Content Projection [Transclusion]

1 Answers