Ngx-bootstrap: Modal Window doesn't work

Created on 5 Jun 2017  路  1Comment  路  Source: valor-software/ngx-bootstrap

Hello,

i'm trying to make modal windows works... but i'm not able to make it works :) ( sorry for my bad english )

i just create a new project with NG new :

@angular/cli: 1.1.0
node: 7.9.0
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3


after that i've install ngx-bootstrap

configured my index HTML :

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

Configured my App module TS :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ModalModule } from 'ngx-bootstrap';

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


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


insert this in my page :

<!--Large modal-->
<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button>

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Large modal</h4>
        <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

page was rendered correctly but, when i click on button... nothing happen... any suggest will be very appreciate :)

Most helpful comment

Ok, i just add this to my index

now everthing works fine... thanks everyone :)

>All comments

Ok, i just add this to my index

now everthing works fine... thanks everyone :)

Was this page helpful?
0 / 5 - 0 ratings