Angular 2+ ng-bootstrap modal pass Html

Question

Okay, I have my modal set up like this. Please remember that I am working in a Component Library not just the application.

Inside my Component Library...

I have my template

 <div class="modal-header">
     <h4 class="mt-3">
        {{header}}
     </h4>
     <button id="messageModalClose" type="button" class="close" aria- 
      label="Close" 
         (click)="closeModal()">
         <span aria-hidden="true">&times;</span>
     </button>
  </div>
  <div class="modal-body">
      {{message}}
  </div>

and Component

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbActiveModal } from '@ng-bootstrap/ng- 
bootstrap';

@Component({
  selector: 'ms-modal',
  templateUrl: './ms-modal.component.html',
  styleUrls: ['./ms-modal.component.scss'],
  //encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
  @Input() header: string;
  @Input() message:string;

  private _modalOptions: NgbModalOptions = {
    backdrop: 'static',
    keyboard: false,
    size: 'lg',
    centered: true
  };


  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {

  }
  closeModal() {
    this.activeModal.close();
  }
}

I import my component into my app module import {msModalModule } from 'ms-components';

I add 'msModalModule' to the @NgModule imports array and also add the component referenced by the module to entryComponents

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     FormsModule,
     msModalModule    
  ],
bootstrap: [AppComponent],
entryComponents:[MsModalComponent]
})
export class AppModule {}

Now in my app.component.ts I add a function to handle opening the Modal and pass in the input values

OpenModal(header,message){

***NgbModalOptions is optional
const modalOptions: NgbModalOptions = {
  backdrop: 'static',
  keyboard: false,
  size: 'lg',
  centered: true,
};


 const modalRef = this.modalService.open(MsModalComponent,modalOptions)
 modalRef.componentInstance.header = header;
 modalRef.componentInstance.message = message;


 }

So instead of just passing string values I would like to pass/display HTML and controls in the refModal to make it more useful...I've heard of "transclusion" for this but only find AngularJS examples...is this right? any other ideas?

Sunil · Accepted Answer · 2018-10-10 20:49:12Z

1

If you just wish to have body part as html. You can use <ng-content></ng-content>

<div class="modal-header">
     <h4 class="mt-3">
        {{header}}
     </h4>
     <button id="messageModalClose" type="button" class="close" aria- 
      label="Close" 
         (click)="closeModal()">
         <span aria-hidden="true">&times;</span>
     </button>
  </div>
  <div class="modal-body">
      <ng-content></ng-content>
  </div>

Use of modal component

<ms-modal><h1> This is modal content area </h1></ms-modal>

answered Oct 10, 2018 at 20:49

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Funn_Bobby Over a year ago

How do I use this in my "modalRef" above?

Funn_Bobby · Accepted Answer · 2018-10-16 17:32:45Z

0

It doesn't look like you can pass form controls to ng-bootstrap modal.

I did however alter my "modal-body" so that text or HTML can be passed. This will only interpret html style tags like (bold) as an example...It will not interpret control tags like or

Using "innerHTML" this is what that looks like.

        <div class="modal-header">
            <h4 class="mt-3">{{header}}
            </h4>
            <button id="messageModalClose" type="button" class="close" aria-label="Close" (click)="closeModal()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" [innerHTML]=message>

        </div>

answered Oct 16, 2018 at 17:32

Funn_Bobby

7351 gold badge23 silver badges62 bronze badges

Collectives™ on Stack Overflow

Angular 2+ ng-bootstrap modal pass Html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related