angular4- Do i need to install ng-bootstrap if i created project using bootstrap 4 alpha theme

Question

I am using SB-Admin-BS4-Angular-4-master theme in angular4. Theme has link to https://v4-alpha.getbootstrap.com/ I want to use bootstrap modals in my code. I used modals as per documentation in the theme.

For the same i used

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

in app.module.ts

Then i had to install ng-bootstrap via npm as it was not working.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

When i installed ngbootstrap, webpack was being removed..

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

I installed webpack again as per Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

Now i am getting error this error when i open that module where i have used modal code..

 Error: Uncaught (in promise): Error: No provider for NgbModalStack!
injectionError@http://localhost:4200/vendor.bundle.js:58005:90
noProviderError@http://localhost:4200/vendor.bundle.js:58043:12
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._throwOrNull@http://localhost:4200/vendor.bundle.js:59485:19
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKeyDefault@http://localhost:4200/vendor.bundle.js:59524:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype._getByKey@http://localhost:4200/vendor.bundle.js:59456:20
../../../core/@angular/core.es5.js/</ReflectiveInjector_.prototype.get@http://localhost:4200/vendor.bundle.js:59325:16
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66317:12
_createClass@http://localhost:4200/vendor.bundle.js:66363:113
_createProviderInstance$1@http://localhost:4200/vendor.bundle.js:66328:26
resolveNgModuleDep@http://localhost:4200/vendor.bundle.js:66313:17
../../../core/@angular/core.es5.js/</N…
Stack trace:
resolvePromise@http://localhost:4200/polyfills.bundle.js:6634:31
resolvePromise@http://localhost:4200/polyfills.bundle.js:6605:17
scheduleResolveOrReject/<@http://localhost:4200/polyfills.bundle.js:6683:17
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6264:17
onInvokeTask@http://localhost:4200/vendor.bundle.js:60717:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.bundle.js:6263:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4200/polyfills.bundle.js:6031:28
drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:6441:25
../../../../zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:4200/polyfills.bundle.js:6342:21
invokeTask@http://localhost:4200/polyfills.bundle.js:7266:9
globalZoneAwareCallback@http://localhost:4200/polyfills.bundle.js:7284:17
  core.es5.js:1020

Do i need to install ng-bootstrap if i am already using a bootstrap theme to use bootstrap components?

HTML code

<div class="tableinfowrap">
  <div class="card-header">
      <div class="row">
        <div class="col-xl-10"><h3>Tables</h3></div>
        <div  class="col-xl-2"> <a class="btn btn-primary" [routerLink]="['addresttable']" role="button">Add Table</a> </div>
      </div>

  </div>
<table class="card-block table table-hover">
  <thead>
  <tr>
    <th>Table Number</th>
    <th>Sitting Capacity</th>
    <th>QR Code Url</th>
    <th></th>
    <th></th>
  </tr>
</thead>
<tbody *ngFor="let table of tablelist" >
<tr>
<td>{{table.tableNumber}}</td>
<td>{{table.seatingCapacity}}</td>
<td>{{table.qrCodeUrl}}</td>
<td ><i class="fa fa-fw fa-edit"></i></td>
<td (click)="open(content)"><i class="fa fa-fw fa-trash"></i></td>
</tr>
</tbody>
</table>


<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</ng-template>
</div>

.ts file code

import { Component, OnInit } from '@angular/core';
import { Router, RouterModule} from '@angular/router';
import { routerTransition } from '../../router.animations';
import { plainToClass } from 'class-transformer';
import { classToPlain } from 'class-transformer';
import {FormsModule} from '@angular/forms';
import {TablesbyResId, ResTablesData} from '../../model/TablesbyResId';
import {TablebyResIdService} from '../../services/TablebyResIdService.service';
import { NgbModule, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-tableinfo',
  templateUrl: './tableinfo.component.html',
  styleUrls: ['./tableinfo.component.scss'],
  providers: [TablebyResIdService ,NgbModal]
})
export class TableinfoComponent implements OnInit {
  tablelist: ResTablesData[];
  deletemodal = false;
  message: boolean;
  closeResult: string;
  constructor(public router: Router, public tablebyresidservice: TablebyResIdService, private modalService: NgbModal) { }

  ngOnInit()
  {
    this.tablebyresidservice.getTablebyIdApi()
    .subscribe(
      res =>
          {
              const tableResponse = plainToClass(TablesbyResId, res as Object)
              console.log(tableResponse);
              if (res.error === true){
              alert(res.message);
              console.log(res.message);
              console.log(res.statusCode);
              console.log(res.error);
              /* this.router.navigate(['/login']); */
          }
              else
              {
                console.log("api hit success");
                this.tablelist = tableResponse.data;
              }
      },
       error => {this.tablebyresidservice.throwError(error);},
       () => {}
      );
  }


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

have you tried adding bootstrap itself instead of ng-bootstrap? npm install bootstrap --save? — mast3rd3mon
– mast3rd3mon, Commented Oct 31, 2017 at 11:23
yeah, not sure if npm install bootstrap --save installs v4 yet but if not, just specify the beta version of 4 — mast3rd3mon
– mast3rd3mon, Commented Oct 31, 2017 at 11:27

Hareesh · Accepted Answer · 2017-11-01 13:21:42Z

0

You need to install ng-bootstrap if you want your modal in Angular way. And your theme uses it.

While going through similar problems this NgbModule.forRoot() seems to be the fix.

But if that not help you, i saw this error Uncaught (in promise) in your log. may be using ModalDismissReasons.

In my project i used NgbModalRef you can try below code.

your import look like this import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';

define modalReference: NgbModalRef; in your class TableinfoComponent

now this is how your open(content) look

open(content) {
    this.modalReference = this.modalService.open(content);
    this.modalReference.result.then((result) => {
      console.log(result);
    });
}

remove all other code including getDismissReason and try.

works for me, hope this will help you.

edited Nov 1, 2017 at 13:21

answered Oct 31, 2017 at 13:44

Hareesh

6,9005 gold badges36 silver badges62 bronze badges

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

7 Comments

Rajat Gupta Over a year ago

i created project by bootstrap theme as mentioned in question and demo modal in working in other module

Rajat Gupta Over a year ago

theme is based on alpha version

Hareesh Over a year ago

your theme has NgbModalStack which is not yet supported in ng-bootstrap check this link

Hareesh Over a year ago

please provide your themes doc link

Hareesh Over a year ago

i checked github repo. your theme not using ng-bootstrap or ngx-bootstrap. link

|

Eliseo · Accepted Answer · 2017-10-31 11:54:39Z

-1

ng-bootstrap is a series of widgets that use bootstrap4.0.css. When we install ng-bootstrap we need ONLY the bootstrap.min.css.

npm install --save @ng-bootstrap/ng-bootstrap

We can download bootstrap.min.css and, e.g. if we are using angular-cli modified the "styles" tag in angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

bootstrap is a series of widgets + bootstrap.css. When we install bootstrap we don't need import bootstrap.min.css

npm install [email protected]

Both them have modals

answered Oct 31, 2017 at 11:54

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Rajat Gupta Over a year ago

i am already using SB-Admin-BS4-Angular-4 (bootstrap theme) i created new project on this theme do i need to install ng-bootstrap or ngx-bootstrap??

Collectives™ on Stack Overflow

angular4- Do i need to install ng-bootstrap if i created project using bootstrap 4 alpha theme

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related