Category: ngx Bootstrap

Aug 10

Ngx-Bootstrap – Environment Setup

Ngx-Bootstrap – Environment Setup ”; Previous Next In this chapter, you will learn in detail about setting up the working environment of ngx-bootstrap on your local computer. As ngx-bootstrap is primarily for angular projects, make sure you have Node.js and npm and angular installed on your system. Create an angular project First create a angular project to test ngx-bootstrap components using following commands. ng new ngxbootstrap It will create an angular project named ngxbootstrap. Add ngx-bootstrap as dependency You can use the following command to install ngx-bootstrap in newly created project− npm install ngx-bootstrap You can observe the following output once ngx-bootstrap is successfully installed − + [email protected] added 1 package from 1 contributor and audited 1454 packages in 16.743s Now, to test if bootstrap works fine with Node.js, create the test component using following command − ng g component test CREATE src/app/test/test.component.html (19 bytes) CREATE src/app/test/test.component.spec.ts (614 bytes) CREATE src/app/test/test.component.ts (267 bytes) CREATE src/app/test/test.component.css (0 bytes) UPDATE src/app/app.module.ts (388 bytes) Clear content of app.component.html and update it following contents. app.component.html <app-test></app-test> Update content of app.module.ts to include ngx-bootstrap accordion module. We”ll add other module in subsequent chapters. Update it following contents. app.module.ts import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { AppComponent } from ”./app.component”; import { TestComponent } from ”./test/test.component”; import { AccordionModule } from ”ngx-bootstrap/accordion” @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Update content of index.html to include bootstrap.css. Update it following contents. index.html <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Ngxbootstrap</title> <base href=”/”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”icon” type=”image/x-icon” href=”favicon.ico”> <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”stylesheet”> </head> <body> <app-root></app-root> </body> </html> In next chapter, we”ll update test component to use ngx-bootstrap components. Print Page Previous Next Advertisements ”;

Aug 10

Ngx-Bootstrap – Timepicker

Ngx-Bootstrap – TimePicker ”; Previous Next ngx-bootstrap timepicker component provides a easy to use and highly configurable Time Picker component. TimepickerComponent selector timepicker Inputs arrowkeys − boolean, if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard. disabled − boolean, if true hours and minutes fields will be disabled. hoursPlaceholder − string, placeholder for hours field in timepicker. hourStep − number, hours change step. max − Date, maximum time user can select. meridians − string[], meridian labels based on locale. min − Date, minimum time user can select. minutesPlaceholder − string, placeholder for minutes field in timepicker. minuteStep − number, hours change step. mousewheel − boolean, if true scroll inside hours and minutes inputs will change time. readonlyInput − boolean, if true hours and minutes fields will be readonly. secondsPlaceholder − string, placeholder for seconds field in timepicker. secondsStep − number, seconds change step. showMeridian − boolean, if true meridian button will be shown. showMinutes − boolean, show minutes in timepicker. showSeconds − boolean, show seconds in timepicker. showSpinners − boolean, if true spinner arrows above and below the inputs will be shown. Outputs isValid − emits true if value is a valid date. Example As we”re going to use a TimePicker, We”ve to update app.module.ts used in ngx-bootstrap Tabs chapter to use TimepickerModule. Update app.module.ts to use the TimepickerModule. app.module.ts import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { AppComponent } from ”./app.component”; import { TestComponent } from ”./test/test.component”; import { AccordionModule } from ”ngx-bootstrap/accordion”; import { AlertModule,AlertConfig } from ”ngx-bootstrap/alert”; import { ButtonsModule } from ”ngx-bootstrap/buttons”; import { FormsModule } from ”@angular/forms”; import { CarouselModule } from ”ngx-bootstrap/carousel”; import { CollapseModule } from ”ngx-bootstrap/collapse”; import { BsDatepickerModule, BsDatepickerConfig } from ”ngx-bootstrap/datepicker”; import { BsDropdownModule,BsDropdownConfig } from ”ngx-bootstrap/dropdown”; import { PaginationModule,PaginationConfig } from ”ngx-bootstrap/pagination”; import { PopoverModule, PopoverConfig } from ”ngx-bootstrap/popover”; import { ProgressbarModule,ProgressbarConfig } from ”ngx-bootstrap/progressbar”; import { RatingModule, RatingConfig } from ”ngx-bootstrap/rating”; import { SortableModule, DraggableItemService } from ”ngx-bootstrap/sortable”; import { TabsModule, TabsetConfig } from ”ngx-bootstrap/tabs”; import { TimepickerModule } from ”ngx-bootstrap/timepicker”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule, ModalModule, PaginationModule, PopoverModule, ProgressbarModule, RatingModule, SortableModule, TabsModule, TimepickerModule.forRoot() ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig, BsModalService, PaginationConfig, ProgressbarConfig, RatingConfig, DraggableItemService, TabsetConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the timepicker component. test.component.html <timepicker [(ngModel)]=”time”></timepicker> <pre class=”alert alert-info”>Time is: {{time}}</pre> <timepicker [(ngModel)]=”time” [showMeridian]=”false”></timepicker> <pre class=”alert alert-info”>Time is: {{time}}</pre> Update test.component.ts for corresponding variables and methods. test.component.ts import { Component, OnInit } from ”@angular/core”; @Component({ selector: ”app-test”, templateUrl: ”./test.component.html”, styleUrls: [”./test.component.css”] }) export class TestComponent implements OnInit { time: Date = new Date(); constructor() {} ngOnInit(): void { } } Build and Serve Run the following command to start the angular server. ng serve Once server is up and running. Open http://localhost:4200. Click on Open modal button and verify the following output. Print Page Previous Next Advertisements ”;

Aug 10

Ngx-Bootstrap – Collapse

Ngx-Bootstrap – Collapse ”; Previous Next ngx-bootstrap Collapse directive helps to show/hide a container content. CollapseDirective selector [collapse] Inputs collapse − boolean, A flag indicating visibility of content (shown or hidden) display − string isAnimated − boolean, turn on/off animation. default: false Outputs collapsed − This event fires as soon as content collapses collapses − This event fires when collapsing is started expanded − This event fires as soon as content becomes visible expands − This event fires when expansion is started Methods toggle() − allows to manually toggle content visibility hide − allows to manually hide content show − allows to manually show collapsed content Example As we”re going to use collapse, We”ve to update app.module.ts used in ngx-bootstrap Carousel chapter to use CollapseModule. Update app.module.ts to use the CollapseModule. app.module.ts import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { BrowserAnimationsModule } from ”@angular/platform-browser/animations”; import { AppComponent } from ”./app.component”; import { TestComponent } from ”./test/test.component”; import { AccordionModule } from ”ngx-bootstrap/accordion”; import { AlertModule,AlertConfig } from ”ngx-bootstrap/alert”; import { ButtonsModule } from ”ngx-bootstrap/buttons”; import { FormsModule } from ”@angular/forms”; import { CarouselModule } from ”ngx-bootstrap/carousel”; import { CollapseModule } from ”ngx-bootstrap/collapse”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule ], providers: [AlertConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the Collapse. test.component.html <div> <div class=”checkbox”> <label><input type=”checkbox” [(ngModel)]=”isCollapsed”>Collapse</label> </div> </div> <div [collapse]=”isCollapsed” [isAnimated]=”true”> <div class=”well well-lg card card-block card-header”>Welcome to Tutorialspoint.</div> </div> Update test.component.ts for corresponding variables and methods. test.component.ts import { Component, OnInit } from ”@angular/core”; @Component({ selector: ”app-test”, templateUrl: ”./test.component.html”, styleUrls: [”./test.component.css”] }) export class TestComponent implements OnInit { isCollapsed: boolean = false; constructor() { } ngOnInit(): void { } } Build and Serve Run the following command to start the angular server. ng serve Once server is up and running. Open http://localhost:4200 and verify the following output. Check the collapse check box and then content will be collapsed. Print Page Previous Next Advertisements ”;