Using ng-bootstrap with angular-cli 1.0.0-beta.18 -
i'm using angular-cli 1.0.0-beta. 18 , trying load ng-bootstrap using guidline @ https://ng-bootstrap.github.io/#/getting-started
steps:
install ng-bootstrap using
npm install --save @ng-bootstrap/ng-bootstrap
added following app.module.ts
import {ngbmodule} '@ng-bootstrap/ng-bootstrap'; @ngmodule({ declarations: [appcomponent, ...], imports: [ngbmodule.forroot(), ...], bootstrap: [appcomponent] }) export class appmodule { }
for ibox-tools.module.ts have
import {ngmodule} "@angular/core"; import {browsermodule} "@angular/platform-browser"; import {iboxtoolscomponent} "./ibox-tools.component.ts"; import {ngbmodule} '@ng-bootstrap/ng-bootstrap'; @ngmodule({ declarations: [iboxtoolscomponent], imports : [ngbmodule, browsermodule], exports : [iboxtoolscomponent], }) export class iboxtoolsmodule {}
and try use ngbdropdown module in ibox-tools.template.html
<div class="col-xs-6"> <div ngbdropdown class="d-inline-block"> <button class="btn btn-outline-primary" id="dropdownmenu1" ngbdropdowntoggle>toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownmenu1"> <button class="dropdown-item">action - 1</button> <button class="dropdown-item">another action</button> <button class="dropdown-item">something else here</button> </div> </div> </div>
but ngbdropdown doesnt work. dont errors, bootstrap4.css included etc.
the getting started guide tells me use
map: { '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', }
if im using systemjs, dont think thats case, angular-cli 1.0.0-beta. 18 using webpack , should load ng-bootstrap automatically. wrong here? dont find place should add mapping, else managed use ng-bootstrap angular-cli 1.0.0-beta. 18?
sorry, bad. im still learning angular2 , problem included ibox-tools.component.ts module, , not ibox-tools.module.ts needed, missed ng-bootstrap secondary module imported in ibox-tools.module.ts ;)
so webpack working great , no need mapping had systemjs.
hope understand answer, if not ask , can try explain better.
Comments
Post a Comment