1

I'm using ngx-bootstrap for modal in Angular 6, I have created one shared modal in which i want to add different Html templates in the modal-body section. How to add HTML template or How I can pass the dynamic components to the shared modal.

Shared modal component: 

@Component({
selector: 'modal-content',
template: `
<div class="modal-header">
  <h4 class="modal-title">{{headerText}}</h4>
</div>
  <div *ngIf="showTemplate" class="modal-body">
   <templateselector></templateselector>
 </div>
<div class="modal-footer">
  <button  type="button" class="btn btn-primary" (click)="clickOk()"> 
  {{actionButtonText}}</button>
</div>
`
 })
export class ModalContentComponent{
 headerText: string; 
 actionButtonText: string;
 showTemplate: boolean;
 templateselector: any;  

 constructor(public bsModalRef: BsModalRef) { }

 clickOk() {
    this.bsModalRef.hide();
 }

Calling Component:

@Component({
selector: 'modal-content',
template: `
   <div>
  <button type="button" class="btn" 
  (click)="openModalWithComponent()">modal</button>
   </div>`
  })

export class DynamicComponent{

constructor(public bsModalRef: BsModalRef) { }

openModalWithComponent(message: string, title: string) {
    const initialState = {
        headerText: title, 
        actionButtonText: "Continue",
        showTemplate: true,
        templateSelector : NewComponent //From here i need to pass different 
        //HTML which should get load in Modal body.
};
    this.bsModalRef = this.modalService.show(ModalContentComponent, { 
    initialState });

}

From calling component I should be able to pass the name of the component, I dont want to hardcode the selector as that components are going to change, and that component along with the modal header and footer should get loaded.

Angular
  • 161
  • 1
  • 4
  • 17
  • Possible duplicate of [Dynamically ADDING and REMOVING Components in Angular](https://stackoverflow.com/questions/44939878/dynamically-adding-and-removing-components-in-angular) – CTheCheese Jan 04 '19 at 09:49
  • @ColbyHunter this issue is different, as I want to pass the different Components to the modal body through the calling component. For example: I have 6 components which i want to display as a modal from one main component, so I created one shared modalComponent in that I will pass the 6 component based on the condition as a modal body. thanks – Angular Jan 04 '19 at 10:00
  • It isn't really though, the answer is in there it's just not solving your specific problem. There's also information on it [here](https://jaxenter.com/dynamically-create-component-angular-142720.html) and [from the official docs here](https://angular.io/guide/dynamic-component-loader). – CTheCheese Jan 04 '19 at 10:03

1 Answers1

0

Instead of

this.bsModalRef = this.modalService.show(ModalContentComponent, { initialState });

You might want to remove the brackets and just use the object as the second parameter:

this.bsModalRef = this.modalService.show(ModalContentComponent, initialState);
downhand
  • 395
  • 1
  • 9
  • 23