Swarnakshyari
Swarnakshyari

Reputation: 11

ng-bootstrap modal window is not working properly

app.component.html

<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
    <h4 class="modal-title">Modal title</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>One fine body&hellip;</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close 
 click')">Close</button>
</div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" 
 (click)="open(content)">Launch demo modal</button>

 <hr>

<pre>{{closeResult}}</pre>

app.component.ts

import { Component } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
closeResult: string;

constructor(private modalService: NgbModal) {}

open(content) {
this.modalService.open(content).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
  return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
  return 'by clicking on a backdrop';
} else {
  return  `with: ${reason}`;
}
}
}

I have created my modal window in app.component.html, I have installed npm install --save @ng-bootstrap/ng-bootstrap, But when I am clicking on my "lunch demo modal" its not commit in the proper format.But all buttons are working.

Upvotes: 0

Views: 1905

Answers (1)

Mandana Rz
Mandana Rz

Reputation: 29

Add this line to your index.html

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Or add bootstrap css code to your project following this link.

Upvotes: 1

Related Questions