Skip to main content

angular bootstrap - How to use Timepicker

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  time = {hour: 9, minute: 26};
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to use Timepicker
</h4>

<h5><b>Selected Time:</b></h5>
<br/>

<h5>{{time | json}}</h5>
<br/>

<ngb-timepicker [(ngModel)]="time">
</ngb-timepicker>
app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

// for angular bootstrap timepicker
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule, // for angular bootstrap
    FormsModule // for angular bootstrap timepicker
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
More Angular tutorials
Labels: