Adding bootstrap modal in angular 4

Question

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.

Have you added some content? ng-bootstrap.github.io/#/components/modal/examples — Jonathan Dion
– Jonathan Dion, Commented Dec 26, 2017 at 21:53
Yes, i tried with that. And the same. So i tried to take an easy way, at least for testing if something pops. I'm following this simple plunker example, plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview @JonathanDion — Franco
– Franco, Commented Dec 26, 2017 at 21:58
Can you put all your code in a sandbox? Like plunker. I will take a look. — Jonathan Dion
– Jonathan Dion, Commented Dec 26, 2017 at 22:25

Abhishek Ekaanth · Accepted Answer · 2017-12-27 06:38:16Z

1

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.

answered Dec 27, 2017 at 6:38

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Ekaanth Over a year ago

can you be more specific about your question @sree

sree Over a year ago

I am new to Angular 4 and i don't know in which file we need to keep the code of code.html file from above

Abhishek Ekaanth Over a year ago

Whichever component you need your model to appear you can place the code there.

Collectives™ on Stack Overflow

Adding bootstrap modal in angular 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related