title: Toggle Ng-Bootstrap Modal in Angular 4
body: <p>I want to display a modal when I click on a button, but I see that something is happening, but the modal is not visible.
  I tried to follow that <a href="http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview" rel="nofollow noreferrer">plunker</a>
  There must be an error in my NgModule Declarations, Providers, Imports...</p>
  
  <p>devices.component.ts (the page where I want my modal to show up)</p>
  
  <pre><code>import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild,} from '@angular/core';
  import {Http} from "@angular/http";
  import {Headers} from '@angular/http';
  import {Router} from "@angular/router";
  import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
  
  
  @Component({
    selector: 'ngbd-modal-content',
    template: `
      &lt;div class="modal-header"&gt;
        &lt;h4 class="modal-title"&gt;Hi there!&lt;/h4&gt;
        &lt;button type="button"
          class="close"
          aria-label="Close"
          (click)="activeModal.dismiss('Cross click')"&gt;
          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Hello, {{name}}!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button"
          class="btn btn-secondary"
          (click)="activeModal.close('Close click')"&gt;
          Close
        &lt;/button&gt;
      &lt;/div&gt;
    `
  })
  export class NgbdModalContent {
    @Input() name;
  
    constructor(public activeModal: NgbActiveModal) {}
  }
  
  
  @Component({
    selector: 'devices',
    templateUrl: 'devices.template.html'
  })
  export class DevicesComponent implements OnDestroy, OnInit  {
    public constructor(
      private http: Http,
      public router: Router,
      private modalService: NgbModal
    ) {
      this.nav = document.querySelector('nav.navbar');
      localStorage.setItem('currrentRoute', 'devices');
    }
  
    public openModal() {
      // jQuery(this.myModal.nativeElement).modal('show');
      //alert('hello');
      const modalRef = this.modalService.open(NgbdModalContent);
      modalRef.componentInstance.name = 'World';
    }
  }
  </code></pre>
  
  <p>Call in my devices.template.html</p>
  
  <pre><code>&lt;h5&gt;My Registered &lt;strong&gt;devices&lt;/strong&gt;&lt;/h5&gt;
  &lt;button class="btn btn-primary pull-right" type="button" (click)="openModal()"&gt;
    &lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add a device
  &lt;/button&gt;
  </code></pre>
  
  <p>appviews.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [
      UserComponent,
      DevicesComponent,
      DeviceComponent,
      NgbdModalContent
  
    ],
    imports: [
      BrowserModule,
      RouterModule,
      DataTableModule,
      PeityModule,
      SparklineModule,
      NgbModule.forRoot()
    ],
    exports: [
      UserComponent,
      DevicesComponent,
      DeviceComponent,
    ],
    entryComponents: [NgbdModalContent],
  })
  
  export class AppviewsModule {
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AuthModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule,
      DashboardsModule,
      LayoutsModule,
      AppviewsModule,
      RouterModule.forRoot(ROUTES)
    ],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, AuthGuard],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>