CODEWITHSUNDEEP
angularbootstrap-modalng-bootstrap
student18
student18

Reputation: 538

Callable Angular Bootstrap Modal by any component inside module in Angular 6

I am trying to implement a global modal using ng-bootstrap in my Angular 6 project.

My goal is to make the modal callable by any component inside a specific module by clicking for example a button. In the example of above link they only show how to call it from one component.

How can I achieve this? Do I need to implement a specific service for this? Do I need to add entryComponents to the specific module? Do I always need a open() method like in given example in every component where I want to use my modal?

A simple example or hint would be very useful :)

modal.template.html:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Some Content
  </div>
</ng-template>

Upvotes: 0

Views: 868

Answers (2)

piotr szybicki
piotr szybicki

Reputation: 1602

There is another option. Aldo it is so ugly that I totally don't recommend it. I just did it because i was curious. If you have a component that is always visible in your application. Or at least always that you need the modal window to be displayed you can place the template definition in that component:

always.vible.component.ts:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
  </div>
</ng-template>

Then in the AfterContentInit hook you can initialize the service.

  ngAfterContentInit(): void {
    this.modalService.setModal(this.tempalte);
  }

The service looks like this:

import { Injectable, TemplateRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

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

  private content:any;

  constructor(private modalService: NgbModal) { }

  setModal(content:any){
    console.log(content);
    this.content = content;
  }

  public showWindow():void{
    this.modalService.open(this.content, { centered: true });
  }
}

and then you can inject that service in your application and show your modal by invoking : showWindow. But let me reiterate this is not recommended. I just prove that is is possible.

Upvotes: 1

Sheik Althaf
Sheik Althaf

Reputation: 1605

create a component and add it to entryComponents then create a service with root

<!-- language: lang-js -->

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { myComponent } from './component';

@Injectable({ providedIn: 'root' })
export class CommonService {
  constructor(
    private modalService: NgbModal
  ) {}

  private myModal() {
    const modalRef = this.modalService.open(myComponent, {
      windowClass: 'in'
    });
    return modalRef.result;
  }

}

Then simply inject the service in component and call myModal funtion then the modal will be open

Upvotes: 0

Related Questions