CODEWITHSUNDEEP
javascriptangularng-bootstrap
abdoutelb
abdoutelb

Reputation: 1053

Modal doesn't appear correctly angular 4

I am using ng-bootstrap Here try to do a modal sample ,but when i click on open modal it doesn't appear although it exists inside the DOM. enter image description here

my angular core version :4.0.0 , @ng-bootstrap/ng-bootstrap :1.0.0-alpha.29, bootstrap :3.3.7

test-modal.component.html

<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-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>

test-modal.component.ts

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

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

@Component({
  selector: 'app-test-modal',
  templateUrl: './test-modal.component.html',
  styleUrls: ['./test-modal.component.css']
})
export class TestModalComponent  {

@Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

the open function in app.component.ts with the constructor

 constructor(private modalService: NgbModal) {}
  open() {
    const modalRef = this.modalService.open(TestModalComponent);
  }

the button inside app.component.html

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

Upvotes: 2

Views: 1475

Answers (1)

BrunoLM
BrunoLM

Reputation: 100381

I think the problem might be your bootstrap version bootstrap :3.3.7, when I got to the homepage it says it is for Bootstrap 4 (it also says bootstrap 4 on the get started).

And testing over here in a Angular 4 + Bootstrap 4 project I got it working

example

In package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"bootstrap": "^4.0.0-alpha.6",

In my module

imports: [
  NgbModule.forRoot(), ...
],
entryComponents: [ModalTemplateComponent],

In a component:

modal: NgbModalRef;

constructor(private modalService: NgbModal) { }  

async open() {
  this.modal = this.modalService.open(ModalTemplateComponent);

  const result = await this.modal.result;

  console.log(result);
}

Upvotes: 3

Related Questions