Angular + ng-bootstrap - Modal : window does not open

Question

I\'m new with Angular, and i have a problem while trying the simple example with ng-bootstrap modal. I just tried to have a window open and instead it appears in my applica

Answer 1

As described in ng-bootstrap NgbModal "A service to open modal windows" and it has no properties to open modal window in new browser window.

I've created the same app as you:

• angular 4.1.0-beta.0
• bootstrap 4.0.0-alpha.6
• ng-bootstrap 1.0.0-alpha.22

And modal windows works as expected, here is content of my app

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html (I use Bootstrap CDN)

  
  
  
  
  
  


  Loading...

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

app.component.html

Launch demo modal



{{closeResult}}