Install NPM package for angular library

Question

I am just picking up Angular 8 and CLI and have created a project as below

ng new my-demo
cd my-demo
ng g library foo --prefix=my

Now in my library I want to add ngx-bootstrap as the component and will need the DropdownButtonModule so my question is how do I go about installing the npm package for the library?

I tried as suggested in the link Installing NPM packages in angular 6 workspace

But build is failing and unable to identify the DropdownButtonModule in mylibrarymodule.ts file to import the module

Also i need to bundle the dependencies for the library

Answer 1

First Install ngx-bootstrap from npm

npm install ngx-bootstrap --save

Add BsDropdownModule to NgModule imports:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  ...
  imports: [BsDropdownModule.forRoot(),...]
  ...
})

Use it in your HTML file as below.

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>