ng-bootstrap模态页眉和页脚不显示？

Question

I am using Bootstrap 4 so I was able to launch modal window and rendered data from the component but I don't see header and footer that I have part of HTML I can not close the modal window. What is missing in below code?

modal.component.ts

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

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

@Component({
  selector: 'ngbd-modal-content',
  templateUrl: './modal.component.html',
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

modal.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">
  </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>

home.component.ts

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

export class HomeComponent implements OnChanges{

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

 onClick(evt){
     const modalRef = this.ngbModal.open(HomeComponent,{ size: 'lg', backdrop: 'static' });
   }

}

Answer 1

I know this is an old question but here is an answer

I had the same issue and if you look close at the example provided they make use of the template reference variable ( #content ). To get it working with minor alteration you can import the additional elements required;

ViewChild and ElementRef

import { Component, OnInit, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';

then under the closeResult variable add a reference to the templated variable

closeResult: string; @ViewChild('content') content: ElementRef;

Then the header and footer will be shown as the content is rendered correctly with all the mark , otherwise content would just be the body and text you pass.

Cheers

Neil

Answer 2

Using ngbModal you can, open a modal that belongs to your component (in this case your button and your are in the same html, (it's the first example)

<ng-template #content let-c="close" let-d="dismiss">
...
</ng-template>

<button (click)="open(content)">Launch demo modal</button>

or open a component that was modal. In this case, the button is in one component, and the component modal is another The modal component is like . See that there aren not "ng-template". And in the .ts it's necesary import NgbModal, NgbActiveModal to get function to close button

<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">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>

The component that open the modal must import NgbModal and put in the constructor to open the modal

Answer 3

There are a few classes and components that make up a Bootstrap 4 modal. You can't just leave out some of those classes and components and then hope to still get a working modal.

Use the following code snippet as a template. Your code needs to produce that HTML if you want a working modal. Don't leave out the necessary parts (divs & classes).

Click the "run code snippet" button below to see it working:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>