I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page):
- Create a new project using `ng new testApp`
- Following the get started pages of ng-bootstrap, I need bootstrap 4 pre-installed, so I ran npm install [email protected]
- Next, I ran npm install --save @ng-bootstrap/ng-bootstrap
Followed the get started guide and added the following to my app.module.ts file:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) export class AppModule { }
With the setup complete, I copied the Date Picker HTML and TS code from Date Picker and inserted it into my app.component.ts and app.compoennt.html files.
app.component.ts
import { Component } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
const now = new Date();
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
model: NgbDateStruct;
date: { year: number, month: number };
selectToday() {
this.model = { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };
}
}
app.component.html
<p>Simple datepicker</p>
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
<hr/>
<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button>
<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 2})">To Feb 2013</button>
<hr/>
<pre>Month: {{ date.month }}.{{ date.year }}</pre>
<pre>Model: {{ model | json }}</pre>
- After running `ng serve`, this is the result: https://i.stack.imgur.com/2vVVj.png https://i.stack.imgur.com/FvAR1.png