CODEWITHSUNDEEP
angularangular-componentsng-bootstrapangular-library
Funn_Bobby
Funn_Bobby

Reputation: 715

Angular 2+ ng-bootstrap modal pass Html

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?

Upvotes: 0

Views: 1601

Answers (2)

Funn_Bobby
Funn_Bobby

Reputation: 715

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>

Upvotes: 0

Sunil
Sunil

Reputation: 11243

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>

Upvotes: 1

Related Questions