Category: ngx Bootstrap

Ngx-Bootstrap – Sortable ”; Previous Next ngx-bootstrap sortable component provides a configurable sortable component, with drag drop support. SortableComponent selector bs-sortable Inputs fieldName − string, field name if input array consists of objects. itemActiveClass − string, class name for active item. itemActiveStyle − { [key: string]: string; }, style object for active item. itemClass − string, class name for item itemStyle − string, class name for item itemTemplate − TemplateRef<any>, used to specify a custom item template. Template variables: item and index; placeholderClass − string, class name for placeholder placeholderItem − string, placeholder item which will be shown if collection is empty placeholderStyle − string, style object for placeholder wrapperClass − string, class name for items wrapper wrapperStyle − { [key: string]: string; }, style object for items wrapper Outputs onChange − fired on array change (reordering, insert, remove), same as ngModelChange. Returns new items collection as a payload. Example As we”re going to use a sortable, We”ve to update app.module.ts used in ngx-bootstrap Rating chapter to use SortableModule and DraggableItemService. Update app.module.ts to use the SortableModule and DraggableItemService. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule, ModalModule, PaginationModule, PopoverModule, ProgressbarModule, RatingModule, SortableModule ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig, BsModalService, PaginationConfig, ProgressbarConfig, RatingConfig, DraggableItemService], bootstrap: [AppComponent] }) export class AppModule { } Update styles.css to use styles for sortable component. Styles.css .sortableItem { padding: 6px 12px; margin-bottom: 4px; font-size: 14px; line-height: 1.4em; text-align: center; cursor: grab; border: 1px solid transparent; border-radius: 4px; border-color: #adadad; } .sortableItemActive { background-color: #e6e6e6; box-shadow: inset 0 3px 5px rgba(0,0,0,.125); } .sortableWrapper { min-height: 150px; } Update test.component.html to use the sortable component. test.component.html <bs-sortable [(ngModel)]=”items” fieldName=”name” itemClass=”sortableItem” itemActiveClass=”sortableItemActive” wrapperClass=”sortableWrapper”> </bs-sortable> 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 { items = [ { id: 1, name: ”Apple” }, { id: 2, name: ”Orange” }, { id: 3, name: ”Mango” } ]; 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. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – Dropdowns ”; Previous Next ngx-bootstrap dropdown component is toggleable and provides contextual overlay to display list of links etc. With dropdown directives we can make dropdowns interactive. BsDropdownDirective selector [bsDropdown],[dropdown] Inputs autoClose − boolean, Indicates that dropdown will be closed on item or document click, and after pressing ESC container − string, A selector specifying the element the popover should be appended to. dropup − boolean, This attribute indicates that the dropdown should be opened upwards. insideClick − boolean, This attribute indicates that the dropdown shouldn”t close on inside click when autoClose is set to true. isAnimated − boolean, Indicates that dropdown will be animated isDisabled − boolean, Disables dropdown toggle and hides dropdown menu if opened isOpen − boolean, Returns whether or not the popover is currently being shown placement − string, Placement of a popover. Accepts: “top”, “bottom”, “left”, “right” triggers − string, Specifies events that should trigger. Supports a space separated list of event names. Outputs isOpenChange − Emits an event when isOpen change onHidden − Emits an event when the popover is hidden onShown − Emits an event when the popover is shown Methods show() − Opens an element”s popover. This is considered a ”manual” triggering of the popover. hide() − Closes an element”s popover. This is considered a ”manual” triggering of the popover. toggle() − Toggles an element”s popover. This is considered a ”manual” triggering of the popover. setConfig() − Set config for popover Example As we”re going to use dropdowns, We”ve to update app.module.ts used in ngx-bootstrap DatePicker chapter to use BsDropdownModule and BsDropdownConfig. Update app.module.ts to use the BsDropdownModule and BsDropdownConfig. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the dropdowns. test.component.html <div class=”btn-group” dropdown #dropdown=”bs-dropdown” [autoClose]=”false”> <button id=”button-basic” dropdownToggle type=”button” class=”btn btn-primary dropdown-toggle” aria-controls=”dropdown-basic”> Menu <span class=”caret”></span> </button> <ul id=”dropdown-basic” *dropdownMenu class=”dropdown-menu” role=”menu” aria-labelledby=”button-basic”> <li role=”menuitem”><a class=”dropdown-item” href=”#”>File</a></li> <li role=”menuitem”><a class=”dropdown-item” href=”#”>Edit</a></li> <li role=”menuitem”><a class=”dropdown-item” href=”#”>Search</a></li> <li class=”divider dropdown-divider”></li> <li role=”menuitem”><a class=”dropdown-item” href=”#”>Recents</a> </li> </ul> </div> <button type=”button” class=”btn btn-primary” (click)=”dropdown.isOpen = !dropdown.isOpen”>Show/Hide </button> 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 { 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. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – Rating ”; Previous Next ngx-bootstrap rating component provides a configurable rating component, a star bar by default. RatingComponent selector rating Inputs customTemplate − TemplateRef<any>, custom template for icons. max − number, no. of icons, default: 5. readonly − boolean, if true will not react on any user events. titles − string[], array of icons titles, default: ([1, 2, 3, 4, 5]) Outputs onHover − fired when icon selected, $event:number equals to selected rating. onLeave − fired when icon selected, $event:number equals to previous rating value. Example As we”re going to use a rating, We”ve to update app.module.ts used in ngx-bootstrap ProgressBar chapter to use RatingModule, RatingConfig. Update app.module.ts to use the RatingModule and RatingConfig. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule, ModalModule, PaginationModule, PopoverModule, ProgressbarModule, RatingModule ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig, BsModalService, PaginationConfig, ProgressbarConfig, RatingConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the rating. test.component.html <rating [(ngModel)]=”value” [max]=”max” [readonly]=”false” [titles]=”[”one”,”two”,”three”,”four”]”></rating> 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 { max: number = 10; value: number = 5; 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 ”;

Ngx-Bootstrap – Carousel ”; Previous Next ngx-bootstrap Carousel is used to create slide show of images or text CarouselComponent Base element to create carousel. selector carousel Inputs activeSlide − number, Index of currently displayed slide(started for 0) indicatorsByChunk − boolean, default: false interval − number, Delay of item cycling in milliseconds. If false, carousel won”t cycle automatically. isAnimated − boolean, Turn on/off animation. Animation doesn”t work for multilist carousel, default: false itemsPerSlide − number, default: 1 noPause − boolean noWrap − boolean pauseOnFocus − boolean showIndicators − boolean singleSlideOffset − boolean startFromIndex − number, default: 0 Outputs activeSlideChange − Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property slideRangeChange − Will be emitted when active slides has been changed in multilist mode SlideComponent selector slide Inputs active − boolean, Is current slide active Example As we”re going to use carousel, We”ve to update app.module.ts used in ngx-bootstrap Buttons chapter to use CarouselModule. Update app.module.ts to use the CarouselModule. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule ], providers: [AlertConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the Carousel. test.component.html <div style=”width: 500px; height: 500px;”> <carousel [noWrap]=”noWrapSlides” [showIndicators]=”showIndicator”> <slide *ngFor=”let slide of slides; let index=index”> <img [src]=”slide.image” alt=”image slide” style=”display: block; width: 100%;”> <div class=”carousel-caption”> <h4>Slide {{index}}</h4> <p>{{slide.text}}</p> </div> </slide> </carousel> <br/> <div> <div class=”checkbox”> <label><input type=”checkbox” [(ngModel)]=”noWrapSlides”>Disable Slide Looping</label> <label><input type=”checkbox” [(ngModel)]=”showIndicator”>Enable Indicator</label> </div> </div> </div> Update test.component.ts for corresponding variables and methods. test.component.ts import { Component, OnInit } from ”@angular/core”; import { CarouselConfig } from ”ngx-bootstrap/carousel”; @Component({ selector: ”app-test”, templateUrl: ”./test.component.html”, providers: [ { provide: CarouselConfig, useValue: { interval: 1500, noPause: false, showIndicators: true } } ], styleUrls: [”./test.component.css”] }) export class TestComponent implements OnInit { slides = [ {image: ”assets/images/nature/1.jpg”, text: ”First”}, {image: ”assets/images/nature/2.jpg”,text: ”Second”}, {image: ”assets/images/nature/3.jpg”,text: ”Third”} ]; noWrapSlides = false; showIndicator = true; 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. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – Tooltip ”; Previous Next ngx-bootstrap tooltip component provides a easy to use and highly configurable Tooltip component. TooltipDirective selector [tooltip], [tooltipHtml] Inputs adaptivePosition − boolean, sets disable adaptive position. container − string, A selector specifying the element the tooltip should be appended to. containerClass − string, Css class for tooltip container. delay − number, Delay before showing the tooltip. isDisabled − boolean, Allows to disable tooltip. isOpen − boolean, Returns whether or not the tooltip is currently being shown. placement − string, Placement of a tooltip. Accepts: “top”, “bottom”, “left”, “right”. tooltip − string | TemplateRef<any>, Content to be displayed as tooltip. tooltipAnimation − boolean, default: true. tooltipAppendToBody − boolean. tooltipClass − string. tooltipContext − any. tooltipEnable − boolean. tooltipFadeDuration − number, default: 150. tooltipHtml − string | TemplateRef<any>. tooltipIsOpen − boolean. tooltipPlacement − string tooltipPopupDelay − number tooltipTrigger − string | string[] triggers − string, Specifies events that should trigger. Supports a space separated list of event names. Outputs onHidden − Emits an event when the tooltip is hidden. onShown − Emits an event when the tooltip is shown. tooltipChange − Fired when tooltip content changes. tooltipStateChanged − Fired when tooltip state changes. Example As we”re going to use Tooltip, We”ve to update app.module.ts used in ngx-bootstrap TimePicker chapter to use TooltipModule. Update app.module.ts to use the TooltipModule. 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”; import { TooltipModule } from ”ngx-bootstrap/tooltip”; @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(), TooltipModule.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 ”;

Ngx-Bootstrap – Overview ”; Previous Next The ngx-bootstrap is a very popular library to use bootstrap components in Angular Based projects. It contains almost all core components of Bootstrap. ngx-bootstrap components are by design modular,extensible and adaptable. Following are the key highlighting points of this bootstrap library. Flexibility All components are modular by design. Custom templates, Styles can be applied easily. All components are extensible and adaptable and works on desktop and mobile with same ease and performance. Support All components uses latest style guides and guidelines for code maintainability and readablity. All components are fully unit tested and supports latest angular versions. Extensive Documentation All components are richly documented and well written. All components are have multiple working demos to exihibits multiple types of functionalities. Open Source ngx-bootstrap is open source project. It is backed by MIT License. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – Buttons ”; Previous Next ngx-bootstrap buttons have two specific directives which makes a group of buttons to behave as checkbox or radio buttons or hybrid where a radio button can be unchecked. ButtonCheckboxDirective Add checkbox functionality to any element. selector [btnCheckbox] Inputs btnCheckboxFalse − boolean, Falsy value, will be set to ngModel, default: false btnCheckboxTrue − boolean, Truthy value, will be set to ngModel, default: true ButtonRadioDirective Create radio buttons or groups of buttons. A value of a selected button is bound to a variable specified via ngModel. selector [btnRadio] Inputs btnRadio − string, Radio button value, will be set to ngModel disabled − boolean, If true – radio button is disabled uncheckable − boolean, If true – radio button can be unchecked value − string, Current value of radio component or group ButtonRadioGroupDirective A group of radio buttons. A value of a selected button is bound to a variable specified via ngModel. selector [btnRadioGroup] Example As we”re going to use buttons, We”ve to update app.module.ts used in ngx-bootstrap Alerts chapter to use ButtonsModule. We”re also adding support for input controls using FormModule. Update app.module.ts to use the AlertModule and AlertConfig. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule ], providers: [AlertConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the buttons. test.component.html <button type=”button” class=”btn btn-primary” (click)=”clicked()”> Single Button </button> <pre class=”card card-block card-header”> {{clickCounter}} </pre> <p>Button as Checkbox</p> <div class=”btn-group”> <label class=”btn btn-primary” [(ngModel)]=”checkModel.left” btnCheckbox tabindex=”0″ role=”button”>Left</label> <label class=”btn btn-primary” [(ngModel)]=”checkModel.right” btnCheckbox tabindex=”0″ role=”button”>Right</label> </div> <pre class=”card card-block card-header”> {{checkModel | json}} </pre> <p>Button as RadionButton</p> <div class=”form-inline”> <div class=”btn-group” btnRadioGroup [(ngModel)]=”radioModel”> <label class=”btn btn-success” btnRadio=”Left”>Left</label> <label class=”btn btn-success” btnRadio=”Right”>Right</label> </div> </div> <pre class=”card card-block card-header”> {{radioModel}} </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 { checkModel = { left: false, right: false }; radioModel = ”Left”; clickCounter = 0; constructor() { } ngOnInit(): void { } clicked(): void { this.clickCounter++; } } 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. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – accordion ”; Previous Next Accordion is a control to display collapsible panels and it is used to display information in limited space. AccordionComponent Displays collapsible content panels for presenting information in a limited amount of space. selector accordion Inputs closeOthers − boolean, if true expanding one item will close all others isAnimated − boolean, turn on/off animation, default: false AccordionPanelComponent AccordionHeading Instead of using heading attribute on the accordion-group, you can use an accordion-heading attribute on any element inside of a group that will be used as group”s header template. selector accordion-group, accordion-panel Inputs heading − string, Clickable text in accordion”s group header isDisabled − boolean, enables/disables accordion group isOpen − boolean, Is accordion group open or closed. This property supports two-way binding panelClass − string, Provides an ability to use Bootstrap”s contextual panel classes (panel-primary, panel-success, panel-info, etc…). Outputs isOpenChange − Emits when the opened state changes AccordionConfig Configuration service, provides default values for the AccordionComponent. Properties closeOthers − boolean, Whether the other panels should be closed when a panel is opened. Default: false isAnimated − boolean, turn on/off animation Example As we”re going to use accordion, We”ve updated app.module.ts to use AccordionModule as in ngx-bootstrap Environment Setup chapter. Update test.component.html to use the accordion. test.component.html <accordion> <accordion-group heading=”Open By Default” [isOpen]=”open”> <p>Open By Default</p> </accordion-group> <accordion-group heading=”Disabled” [isDisabled]=”disabled”> <p>Disabled</p> </accordion-group> <accordion-group heading=”with isOpenChange” (isOpenChange)=”log($event)”> <p>Open Event</p> </accordion-group> </accordion> 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 { open: boolean = true; disabled: boolean = true; constructor() { } ngOnInit(): void { } log(isOpened: boolean){ console.log(isOpened); } } 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. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap Tutorial PDF Version Quick Guide Resources Job Search Discussion The Ngx-Bootstrap is a very popular library to use bootstrap components in Angular Based projects. It contains almost all core components of Bootstrap. ngx-bootstrap components are by design modular,extensible and adaptable. Audience This tutorial is designed for software programmers who want to learn the basics of ngx-bootstrap and its concepts in a simple and easy manner. This tutorial will give you enough understanding on the various functionalities of ngx-bootstrap with suitable examples. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of Node and Angular. Print Page Previous Next Advertisements ”;

Ngx-Bootstrap – Pagination ”; Previous Next ngx-bootstrap pagination component provides pagination links or a pager component to your site or component. PaginationComponent selector pagination Inputs align − boolean, if true aligns each link to the sides of pager boundaryLinks − boolean, if false first and last buttons will be hidden customFirstTemplate − TemplateRef<PaginationLinkContext>, custom template for first link customLastTemplate − TemplateRef<PaginationLinkContext>, custom template for last link customNextTemplate − TemplateRef<PaginationLinkContext>, custom template for next link customPageTemplate − TemplateRef<PaginationLinkContext>, custom template for page link customPreviousTemplate − TemplateRef<PaginationLinkContext>, custom template for previous link directionLinks − boolean, if false previous and next buttons will be hidden disabled − boolean, if true pagination component will be disabled firstText − boolean, first button text itemsPerPage − number, maximum number of items per page. If value less than 1 will display all items on one page lastText − string, last button text maxSize − number, limit number for page links in pager nextText − string, next button text pageBtnClass − string, add class to <li> previousText − string, previous button text rotate − boolean, if true current page will in the middle of pages list totalItems − number, total number of items in all pages Outputs numPages − fired when total pages count changes, $event:number equals to total pages count. pageChanged − fired when page was changed, $event:{page, itemsPerPage} equals to object with current page index and number of items per page. Example As we”re going to use a pagination, We”ve to update app.module.ts used in ngx-bootstrap Modals chapter to use PaginationModule and PaginationConfig. Update app.module.ts to use the PaginationModule and PaginationConfig. 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”; @NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserAnimationsModule, BrowserModule, AccordionModule, AlertModule, ButtonsModule, FormsModule, CarouselModule, CollapseModule, BsDatepickerModule.forRoot(), BsDropdownModule, ModalModule, PaginationModule ], providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig, BsModalService, PaginationConfig], bootstrap: [AppComponent] }) export class AppModule { } Update test.component.html to use the modal. test.component.html <div class=”row”> <div class=”col-xs-12 col-12″> <div class=”content-wrapper”> <p class=”content-item” *ngFor=”let content of returnedArray”>{{content}}</p> </div> <pagination [boundaryLinks]=”showBoundaryLinks” [directionLinks]=”showDirectionLinks” [totalItems]=”contentArray.length” [itemsPerPage]=”5″ (pageChanged)=”pageChanged($event)”></pagination> </div> </div> <div> <div class=”checkbox”> <label><input type=”checkbox” [(ngModel)]=”showBoundaryLinks”>Show Boundary Links</label> <br/> <label><input type=”checkbox” [(ngModel)]=”showDirectionLinks”>Show Direction Links</label> </div> </div> Update test.component.ts for corresponding variables and methods. test.component.ts import { Component, OnInit } from ”@angular/core”; import { BsModalService } from ”ngx-bootstrap/modal”; import { PageChangedEvent } from ”ngx-bootstrap/pagination”; @Component({ selector: ”app-test”, templateUrl: ”./test.component.html”, styleUrls: [”./test.component.css”] }) export class TestComponent implements OnInit { contentArray: string[] = new Array(50).fill(””); returnedArray: string[]; showBoundaryLinks: boolean = true; showDirectionLinks: boolean = true; constructor() {} pageChanged(event: PageChangedEvent): void { const startItem = (event.page – 1) * event.itemsPerPage; const endItem = event.page * event.itemsPerPage; this.returnedArray = this.contentArray.slice(startItem, endItem); } ngOnInit(): void { this.contentArray = this.contentArray.map((v: string, i: number) => { return ”Line ”+ (i + 1); }); this.returnedArray = this.contentArray.slice(0, 5); } } 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 ”;