How to open component content into bootstrap modal?

hussain Source

I have component that i want to inject into modal window using ng bootstrap features so i have imported modules into app also added into entrypoints as suggested in ng-bootstrap docs its giving me little hard time. what is correct approach basically i am calling modal from existing component and that component content should load into modal window. any help will be appreciate.

modal.component.ts

import {Component, Input} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

detail.component.ts

import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '@angular/core';
import {NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

  @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent implements OnChanges{

constructor(private detailService: DetailService,private ngbModal: NgbModal) {};

onClick(evt){
     const modalRef = this.ngbModal.open(Component);

   }
}

detail.component.html

<div class="card card-outline-info">
  <div class="card-header bg-info"><h5>Detail</h5><button (click)="onClick($event)"></button></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>

app.module.ts

import { NgbModule,NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbdModalContent } from './NgModal/modal.component';


@NgModule({
  declarations: [
    AppComponent,
    StreamComponent,
    SearchComponent,
    DetailComponent,
    SlaChartComponent,
     NgbdModalContent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    HttpModule,
    ChartsModule,
    BrowserAnimationsModule,
     NgbModule.forRoot()

  ],
  providers: [StreamService,DatePipe,
              SearchService,
              DetailService,
              ChartService,AuthService,NgbActiveModal,
            {provide: HTTP_INTERCEPTORS,
            useClass: TokenInterceptor,
            multi: true}],
  entryComponents: [NgbdModalContent,DetailComponent],
  bootstrap: [AppComponent]
})
javascriptangulartypescriptbootstrap-modalng-bootstrap

Answers

answered 1 week ago Kevin #1

Try this, I'm not a fan of your modal.component.ts file so scrap that and remove the NgbdModalContent from your app.module.ts

yourModal.component.html

<ng-template #theModal let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 *ngIf="type == 0" class="modal-title">Header</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
  <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
        <button type="button" id="cancel-edit-btn" class="btn btn-primary" (click)="c('Close click')">Cancel</button>
    </div>
</ng-template>

yourModal.component.ts

import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewChildren, ElementRef, Renderer2 } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-custom-modal',
  templateUrl: './yourModal.component.html',
  styleUrls: ['./yourModal.component.scss']
})
export class EditNotesComponent implements OnInit {
  @Input() name: string;
  @ViewChild('theModal') theModal: ElementRef;

  constructor(private modalService: NgbModal) {}

  ngOnInit() {
  }

  showModal() {
    this.modalService.open(this.theModal, { size: 'sm', backdrop: 'static'});
  }

}

detail.component.html

<div class="card card-outline-info">
  <div class="card-header bg-info"><h5>Detail</h5><button (click)="yourCustomModal.showModal()"></button></div>
  <div class="card-block">
      <div class="table-responsive" style="cursor: pointer">
        <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
      </div>
    </div>
  </div>
<app-custom-modal #yourCustomModal [name]="name"></app-custom-modal>

detail.component.ts

import { Component, OnInit,Pipe, PipeTransform, EventEmitter,Input, Output,OnChanges, SimpleChanges } from '@angular/core';

  @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent implements OnChanges{
name: string;

constructor(private detailService: DetailService) {
this.name = 'John Doe';};

}

comments powered by Disqus