CODEWITHSUNDEEP
angularmodal-dialogbootstrap-modal
Franco
Franco

Reputation: 55

Adding bootstrap modal in angular 4

I'm adding a basic modal in Angular 4. The issue it's that it looks like the modal it's appearing in the backdrop of the page.

I have a profile.component.ts. Basically i have: 

import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 
constructor(private modalService: NgbModal){}

open(){
      this.modalService.open('Hello there');
  }

In profile.component.html i have a button calling the open() function. When clicking at the button, the only thing that occurs it's the scroll bar appearing and disappearing.

I'm guessing that something is missing.

Thanks in advance.

Upvotes: 0

Views: 4470

Answers (1)

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2569

When you are calling open() and just sending the string will not work. you should send Id instead.

You can follow this example and it will work perfectly fine.

Code.ts

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 
constructor(private modalService: NgbModal){}

open(){
      this.modalService.open(sayHello);
  }

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}`;
}
}

Code.html

<ng-template ngbModalContainer></ng-template>
<ng-template #sayHello let-c="close" let-d="dismiss">
    <div class="modal-header ">
        <h6 class="modal-title text-uppercase ">Headding</h6>
        <button type="button " class="close " aria-label="Close " (click)="d( 'Cross click') ">
      <span aria-hidden="true ">&times;</span>
    </button>
    </div>
    <div class="modal-header ">
       HELLO :)
    </div>
    <div class="modal-footer">
        <button class="btn " (click)="d( 'Cross click') ">Close</button>
    </div>
</ng-template>

and don't forget to import

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; in your app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';    
imports: [ NgbModule.forRoot(),
    ...
    ...
    ]

I think this should help.

Upvotes: 1

Related Questions