I'm currently developing a modal dialog that requires the ability to dynamically change the templateURL. The code shown is the default template, but I need to be able to swap it out dynamically. I'm unsure of how to achieve this, as the templateURL name and location will be passed in. Below is an excerpt of my component code:
import { ModalService } from './../../services/modal.service';
import {Component, Input} from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-ngbd-modal-content',
templateUrl: '../../templates/modal.tp1.html'
})
export class ModalOptionsComponent {
@Input() name;
constructor(public activeModal: NgbActiveModal, modelService: ModalService) {}
}
export class NgbdModalComponent {
constructor(private ngbModal: NgbModal) {}
}
Ideally, I would like to trigger the modal from my service class rather than the component, but I'm unsure how to proceed with that. Despite researching extensively, I haven't found much information on how to accomplish this.
Modal.service.ts:
import { ModalOptionsComponent } from './../pages/modal-options/modal-options.component';
import { Injectable } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Injectable()
export class ModalService {
constructor(private ngbModal: NgbModal, private modalComp: ModalOptionsComponent) { }
modalService(modal: any) {
const modalDefaults = {
templateUrl: '../templates/modal.tp1.html'
};
const modalOptions = {
hasClose: true,
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?',
okResult: {}
};
}
showModal(customModalDefaults: any, customModalOptions: any) {
}
}
Another requirement is to create a service class for this functionality. I am new to Angular and seeking guidance on how to achieve this.