Как добавить ng-bootstrap компоненты в проект Angular-CLI?
Покажу на примере нового проекта.
ng new project_name
cd project_name
npm install --save bootstrap@next
npm install --save @ng-bootstrap/ng-bootstrap
В angular-cli.json в секцию style надо добавить наш CSS, чтобы глобально подключить стили.
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
В app.module.ts добавляем import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; и NgbModule.forRoot() в imports декоратора @NgModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Всё, можно уже использовать. Например добавим календарь в главный компонент app.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div>
<div>This is celender form ng-bootstrap components</div>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
</div>
Вики страничка на официальном ресурсе по этому вопросу.