Ngx-Bootstrap 快速指南

Ngx-Bootstrap - 概述

ngx-bootstrap 是一個非常流行的庫，用於在基於 Angular 的專案中使用 Bootstrap 元件。它包含幾乎所有 Bootstrap 的核心元件。ngx-bootstrap 元件的設計具有模組化、可擴充套件和適應性強的特點。以下是這個 Bootstrap 庫的關鍵亮點。

靈活性

所有元件都是模組化設計的。可以輕鬆應用自定義模板和樣式。
所有元件都是可擴充套件和可適應的，並且在桌面和移動裝置上都能輕鬆執行並具有相同的效能。

支援

所有元件都使用最新的樣式指南和程式碼可維護性和可讀性指南。
所有元件都經過全面單元測試，並支援最新的 Angular 版本。

廣泛的文件

所有元件都有豐富的文件和良好的編寫。
所有元件都有多個工作演示，以展示多種型別的功能。

開源

ngx-bootstrap 是一個開源專案。它受 MIT 許可證支援。

Ngx-Bootstrap - 環境設定

在本章中，您將詳細瞭解如何在本地計算機上設定 ngx-bootstrap 的工作環境。由於 ngx-bootstrap 主要用於 Angular 專案，因此請確保您的系統上已安裝 **Node.js**、**npm** 和 **Angular**。

建立一個 Angular 專案

首先使用以下命令建立一個 Angular 專案來測試 ngx-bootstrap 元件。

ng new ngxbootstrap

這將建立一個名為 ngxbootstrap 的 Angular 專案。

新增 ngx-bootstrap 作為依賴項

您可以使用以下命令在新建立的專案中安裝 ngx-bootstrap：

npm install ngx-bootstrap

成功安裝 ngx-bootstrap 後，您可以觀察到以下輸出：

+ ngx-bootstrap@5.6.1
added 1 package from 1 contributor and audited 1454 packages in 16.743s

現在，要測試 Bootstrap 是否與 Node.js 正常工作，請使用以下命令建立測試元件：

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)

清除 app.component.html 的內容並更新為以下內容。

app.component.html

<app-test></app-test>

更新 app.module.ts 的內容以包含 ngx-bootstrap 手風琴模組。我們將在後續章節中新增其他模組。更新為以下內容。

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 { }

更新 index.html 的內容以包含 bootstrap.css。更新為以下內容。

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>

在下一章中，我們將更新測試元件以使用 ngx-bootstrap 元件。

Ngx-Bootstrap - 手風琴

手風琴是一種用於顯示可摺疊面板的控制元件，它用於在有限的空間中顯示資訊。

AccordionComponent

顯示可摺疊的內容面板，用於在有限的空間中呈現資訊。

選擇器

accordion

輸入

**closeOthers** - 布林值，如果為 true，則展開一個專案將關閉所有其他專案
**isAnimated** - 布林值，開啟/關閉動畫，預設：false

AccordionPanelComponent

AccordionHeading

無需在 accordion-group 上使用 heading 屬性，您可以在組內任何用作組標題模板的元素上使用 accordion-heading 屬性。

選擇器

accordion-group, accordion-panel

輸入

**heading** - 字串，手風琴組標題中的可點選文字
**isDisabled** - 布林值，啟用/停用手風琴組
**isOpen** - 布林值，手風琴組是開啟還是關閉。此屬性支援雙向繫結
**panelClass** - 字串，提供使用 Bootstrap 上下文面板類（panel-primary、panel-success、panel-info 等...）的功能。

輸出

**isOpenChange** - 開啟狀態更改時發出

AccordionConfig

配置服務，提供 AccordionComponent 的預設值。

屬性

**closeOthers** - 布林值，打開面板時是否應關閉其他面板。預設：false
**isAnimated** - 布林值，開啟/關閉動畫

示例

由於我們將使用手風琴，因此我們已更新 app.module.ts 以使用 **AccordionModule**，如 ngx-bootstrap 環境設定章所示。

更新 test.component.html 以使用手風琴。

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>

更新 test.component.ts 以對應變數和方法。

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);
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 警報

警報為典型使用者操作（如資訊、錯誤）提供上下文訊息，並提供可用且靈活的警報訊息。

AlertComponent

顯示可摺疊的內容面板，用於在有限的空間中呈現資訊。

選擇器

alert, bs-alert

輸入

**dismissible** - 布林值，如果設定，則顯示內聯“關閉”按鈕，預設：false
**dismissOnTimeout** - 字串 | 數字，警報關閉之前的毫秒數
**isOpen** - 布林值，警報是否可見，預設：true
**type** - 字串，警報型別。提供四個 Bootstrap 支援的上下文類之一：success、info、warning 和 danger，預設：warning

輸出

**onClose** - 此事件在呼叫 close 例項方法後立即觸發，$event 是 Alert 元件的例項。
**onClosed** - 警報關閉時觸發此事件，$event 是 Alert 元件的例項

AlertConfig

屬性

**dismissible** - 布林值，警報是否預設可關閉，預設：false
**dismissOnTimeout** - 數字，警報關閉之前的預設時間，預設：undefined
**type** - 字串，預設警報型別，預設：warning

示例

由於我們將使用警報，因此我們必須更新 ngx-bootstrap 手風琴章中使用的 app.module.ts 以使用 **AlertModule** 和 **AlertConfig**。

更新 app.module.ts 以使用 AlertModule 和 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';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用警報。

test.component.html

<alert type="success" 
   [dismissible]="dismissible"
   [isOpen]="open"
   (onClosed)="log($event)"
   [dismissOnTimeout]="timeout">
   <h4 class="alert-heading">Well done!</h4>
   <p>Success Message</p>
</alert>
<alert type="info">
   <strong>Heads up!</strong> Info
</alert>
<alert type="warning">
   <strong>Warning!</strong> Warning
</alert>
<alert type="danger">
   <strong>Oh snap!</strong> Error
</alert>

更新 test.component.ts 以對應變數和方法。

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;
   dismissible: boolean = true;
   timeout: number = 10000;
   constructor() { }
   
   ngOnInit(): void {
   }
   log(alert){
      console.log('alert message closed');
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 按鈕

ngx-bootstrap 按鈕有兩個特定的指令，使一組按鈕的行為像複選框或單選按鈕或混合按鈕（其中單選按鈕可以取消選中）。

ButtonCheckboxDirective

向任何元素新增複選框功能。

選擇器

[btnCheckbox]

輸入

**btnCheckboxFalse** - 布林值，虛假值，將設定為 ngModel，預設：false
**btnCheckboxTrue** - 布林值，真值，將設定為 ngModel，預設：true

ButtonRadioDirective

建立單選按鈕或按鈕組。所選按鈕的值繫結到透過 ngModel 指定的變數。

選擇器

[btnRadio]

輸入

**btnRadio** - 字串，單選按鈕值，將設定為 ngModel
**disabled** - 布林值，如果為 true - 單選按鈕被停用
**uncheckable** - 布林值，如果為 true - 單選按鈕可以取消選中
**value** - 字串，單選元件或組的當前值

ButtonRadioGroupDirective

一組單選按鈕。所選按鈕的值繫結到透過 ngModel 指定的變數。

選擇器

[btnRadioGroup]

示例

由於我們將使用按鈕，因此我們必須更新 ngx-bootstrap 警報章中使用的 app.module.ts 以使用 **ButtonsModule**。我們還使用 FormModule 新增對輸入控制元件的支援。

更新 app.module.ts 以使用 AlertModule 和 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 { }

更新 test.component.html 以使用按鈕。

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>

更新 test.component.ts 以對應變數和方法。

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++;
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 走馬燈

ngx-bootstrap 走馬燈用於建立影像或文字的幻燈片。

CarouselComponent

建立走馬燈的基本元素。

選擇器

carousel

輸入

**activeSlide** - 數字，當前顯示的幻燈片的索引（從 0 開始）
**indicatorsByChunk** - 布林值，預設：false
**interval** - 數字，專案迴圈的延遲（毫秒）。如果為 false，則走馬燈不會自動迴圈。
**isAnimated** - 布林值，開啟/關閉動畫。動畫不適用於多列表走馬燈，預設：false
**itemsPerSlide** - 數字，預設：1
**noPause** - 布林值
**noWrap** - 布林值
**pauseOnFocus** - 布林值
**showIndicators** - 布林值
**singleSlideOffset** - 布林值
**startFromIndex** - 數字，預設：0

輸出

**activeSlideChange** - 當活動幻燈片更改時將發出。雙向繫結 [(activeSlide)] 屬性的一部分
**slideRangeChange** - 在多列表模式下更改活動幻燈片時將發出

SlideComponent

選擇器

slide

輸入

**active** - 布林值，當前幻燈片是否處於活動狀態

示例

由於我們將使用走馬燈，因此我們必須更新 ngx-bootstrap 按鈕章中使用的 app.module.ts 以使用 **CarouselModule**。

更新 app.module.ts 以使用 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 { }

更新 test.component.html 以使用走馬燈。

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>

更新 test.component.ts 以對應變數和方法。

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 {
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 摺疊

ngx-bootstrap 摺疊指令有助於顯示/隱藏容器內容。

CollapseDirective

選擇器

[collapse]

輸入

**collapse** - 布林值，指示內容可見性（顯示或隱藏）的標誌
**display** - 字串
**isAnimated** - 布林值，開啟/關閉動畫。預設：false

輸出

**collapsed** - 內容摺疊後立即觸發此事件
**collapses** - 開始摺疊時觸發此事件
**expanded** - 內容可見後立即觸發此事件
**expands** - 開始展開時觸發此事件

方法

**toggle()** - 允許手動切換內容可見性
**hide** - 允許手動隱藏內容
**show** - 允許手動顯示摺疊的內容

示例

由於我們將使用摺疊，因此我們必須更新 ngx-bootstrap 走馬燈章中使用的 app.module.ts 以使用 **CollapseModule**。

更新 app.module.ts 以使用 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 { }

更新 test.component.html 以使用摺疊。

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>

更新 test.component.ts 以對應變數和方法。

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 {
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

選中摺疊複選框，然後內容將被摺疊。

Ngx-Bootstrap - 日期選擇器

ngx-bootstrap 日期選擇器元件高度可配置且可根據需要自定義。它提供各種選項來選擇日期或日期範圍。

BsDatepickerDirective

選擇器

[bsDatepicker]

輸入

**bsConfig** - Partial，日期選擇器的配置物件
**bsValue** - Date，日期選擇器的初始值
**container** - 字串，指定應將日期選擇器附加到的元素的選擇器。預設：body
**dateCustomClasses** - DatepickerDateCustomClasses[]，日期自定義類
**datesDisabled** - Date[]，停用特定日期
**datesEnabled** - Date[]，啟用特定日期
**dateTooltipTexts** - DatepickerDateTooltipText[]，日期工具提示文字
**daysDisabled** - number[]，停用一週中的某些天
**isDisabled** - 布林值，指示日期選擇器的內容是啟用還是停用
**isOpen** - 布林值，返回日期選擇器當前是否正在顯示
**maxDate** - 布林值，可供選擇的最大日期
**minDate** - 布林值，可供選擇的最小日期
**minMode** - BsDatepickerViewMode，最小檢視模式：day、month 或 year
**outsideClick** - 布林值，在外部點選時關閉日期選擇器，預設：true
**outsideEsc** - 布林值，在 escape 點選時關閉日期選擇器，預設：true
**placement** - "top" | "bottom" | "left" | "right"，日期選擇器的放置位置。接受："top"、"bottom"、"left"、"right"，預設：bottom
**triggers** - 字串，指定應觸發的事件。支援用空格分隔的事件名稱列表，預設：click

輸出

**bsValueChange** - 當日期選擇器的值更改時發出
**onHidden** - 日期選擇器隱藏時發出事件
**onShown** - 日期選擇器顯示時發出事件

方法

**show()** - 開啟元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**hide()** - 關閉元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**toggle()** - 切換元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**setConfig()** - 設定日期選擇器的配置

BsDaterangepickerDirective

選擇器

[bsDaterangepicker]

輸入

bsConfig − Partial<BsDaterangepickerConfig>，日期範圍選擇器的配置物件
bsValue − Date，日期範圍選擇器的初始值
container − string，指定日期範圍選擇器應附加到的元素的選擇器。預設值：body
**dateCustomClasses** - DatepickerDateCustomClasses[]，日期自定義類
**datesDisabled** - Date[]，停用特定日期
**datesEnabled** - Date[]，啟用特定日期
**dateTooltipTexts** - DatepickerDateTooltipText[]，日期工具提示文字
**daysDisabled** - number[]，停用一週中的某些天
isDisabled − boolean，指示日期範圍選擇器的內容是否啟用
isOpen − boolean，返回日期範圍選擇器當前是否顯示
**maxDate** - 布林值，可供選擇的最大日期
**minDate** - 布林值，可供選擇的最小日期
**minMode** - BsDatepickerViewMode，最小檢視模式：day、month 或 year
outsideClick − boolean，單擊外部時關閉日期範圍選擇器，預設值：true
outsideEsc − boolean，按Esc鍵時關閉日期範圍選擇器，預設值：true
placement − "top" | "bottom" | "left" | "right"，日期範圍選擇器的放置位置。接受："top"，"bottom"，"left"，"right"，預設值：bottom
**triggers** - 字串，指定應觸發的事件。支援用空格分隔的事件名稱列表，預設：click

輸出

bsValueChange − 當日期範圍選擇器的值發生更改時發出
onHidden − 日期範圍選擇器隱藏時發出事件
onShown − 日期範圍選擇器顯示時發出事件

方法

**show()** - 開啟元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**hide()** - 關閉元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**toggle()** - 切換元素的日期選擇器。這被認為是日期選擇器的“手動”觸發。
**setConfig()** - 設定日期選擇器的配置

示例

由於我們將使用DatePicker和DateRangePicker，因此我們需要更新在ngx-bootstrap Collapse章節中使用的app.module.ts，以使用BsDatepickerModule和BsDatepickerConfig。

更新app.module.ts以使用BsDatepickerModule和BsDatepickerConfig。

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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot()
   ],
   providers: [AlertConfig, BsDatepickerConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新index.html以使用bs-datepicker.css。

app.module.ts

<!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">
      <link href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css" rel="stylesheet" >
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

更新test.component.html以使用日期選擇器。

test.component.html

<div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Datepicker"
         class="form-control"
         bsDatepicker
         [bsValue]="bsValue"
         [minDate]="minDate"
         [maxDate]="maxDate"
         [daysDisabled]="[6,0]"
         [datesDisabled]="disabledDates"
         [bsConfig]="{ isAnimated: true, dateInputFormat: 'YYYY-MM-DD' }">
   </div>
   <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker
         [(ngModel)]="bsRangeValue"
         [datesEnabled]="enabledDates"
         [bsConfig]="{ isAnimated: true }">
   </div>
</div>

更新 test.component.ts 以對應變數和方法。

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 {

   bsValue = new Date();
   bsRangeValue: Date[];
   maxDate = new Date();
   minDate = new Date();

   constructor() {
      this.minDate.setDate(this.minDate.getDate() - 1);
      this.maxDate.setDate(this.maxDate.getDate() + 7);
      this.bsRangeValue = [this.bsValue, this.maxDate];
   }

   ngOnInit(): void {
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 下拉選單

ngx-bootstrap下拉元件是可切換的，並提供上下文覆蓋層以顯示連結列表等。使用下拉指令，我們可以使下拉選單具有互動性。

BsDropdownDirective

選擇器

[bsDropdown],[dropdown]

輸入

autoClose − boolean，指示下拉選單是否將在專案或文件單擊以及按ESC鍵後關閉
container − string，指定應將彈出視窗附加到的元素的選擇器。
dropup − boolean，此屬性指示下拉選單應向上開啟。
insideClick − boolean，此屬性指示當autoClose設定為true時，下拉選單不應在內部單擊時關閉。
isAnimated − boolean，指示下拉選單是否將顯示動畫
isDisabled − boolean，停用下拉切換並隱藏已開啟的下拉選單
isOpen − boolean，返回彈出視窗當前是否顯示
placement − string，彈出視窗的放置位置。接受："top"，"bottom"，"left"，"right"
triggers − string，指定應觸發的事件。支援以空格分隔的事件名稱列表。

輸出

isOpenChange − 當isOpen更改時發出事件
onHidden − 彈出視窗隱藏時發出事件
onShown − 彈出視窗顯示時發出事件

方法

show() − 開啟元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。
hide() − 關閉元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。
toggle() − 切換元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。
setConfig() − 設定彈出視窗的配置

示例

由於我們將使用下拉選單，因此我們需要更新在ngx-bootstrap DatePicker章節中使用的app.module.ts，以使用BsDropdownModule和BsDropdownConfig。

更新app.module.ts以使用BsDropdownModule和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 { }

更新test.component.html以使用下拉選單。

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>

更新 test.component.ts 以對應變數和方法。

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 {}
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟 https://:4200 並驗證以下輸出。

Ngx-Bootstrap - 模態框

ngx-bootstrap模態元件是一個靈活且高度可配置的對話方塊提示，提供多個預設值，並且可以使用最少的程式碼。

ModalDirective

選擇器

[bsModal]

輸入

config − ModalOptions，允許透過元素屬性設定模態配置

輸出

onHidden − 當模態已完成從使用者隱藏時觸發此事件（將等待CSS轉換完成）。
onHide − 呼叫hide例項方法時立即觸發此事件。
onShow − 呼叫show例項方法時立即觸發此事件。
onShown − 模態已對使用者可見時觸發此事件（將等待CSS轉換完成）。

方法

show() − 允許手動開啟模態。
hide() − 允許手動關閉模態。
toggle() − 允許手動切換模態可見性。
showElement() − 顯示對話方塊。
focusOtherModal() − 事件技巧。

示例

由於我們將使用模態，因此我們需要更新在ngx-bootstrap Dropdowns章節中使用的app.module.ts，以使用ModalModule和BsModalService。

更新app.module.ts以使用ModalModule和BsModalService。

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 { ModalModule, BsModalService } from 'ngx-bootstrap/modal';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule
   ],
   providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig,BsModalService],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新test.component.html以使用模態。

test.component.html

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template>
   <div class="modal-header">
      <h4 class="modal-title pull-left">Modal</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">×</span>
      </button>
   </div>
   <div class="modal-body">
      This is a sample modal dialog box.
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
   </div>
</ng-template>

更新 test.component.ts 以對應變數和方法。

test.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

   modalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}

   openModal(template: TemplateRef<any>) {
      this.modalRef = this.modalService.show(template);
   }

   ngOnInit(): void {
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 分頁

ngx-bootstrap分頁元件為您的站點或元件提供分頁連結或分頁器元件。

PaginationComponent

選擇器

pagination

輸入

align − boolean，如果為true，則將每個連結與分頁器的兩側對齊
boundaryLinks − boolean，如果為false，則隱藏第一個和最後一個按鈕
customFirstTemplate − TemplateRef<PaginationLinkContext>，第一個連結的自定義模板
customLastTemplate − TemplateRef<PaginationLinkContext>，最後一個連結的自定義模板
customNextTemplate − TemplateRef<PaginationLinkContext>，下一個連結的自定義模板
customPageTemplate − TemplateRef<PaginationLinkContext>，頁面連結的自定義模板
customPreviousTemplate − TemplateRef<PaginationLinkContext>，上一個連結的自定義模板
directionLinks − boolean，如果為false，則隱藏上一個和下一個按鈕
disabled − boolean，如果為true，則停用分頁元件
firstText − string，第一個按鈕文字
itemsPerPage − number，每頁最大專案數。如果值小於1，則在一頁上顯示所有專案
lastText − string，最後一個按鈕文字
maxSize − number，分頁器中頁面連結的數量限制
nextText − string，下一個按鈕文字
pageBtnClass − string，向<li>新增類
previousText − string，上一個按鈕文字
rotate − boolean，如果為true，則當前頁面將在頁面列表的中間
totalItems − number，所有頁面中專案的總數

輸出

numPages − 當總頁數更改時觸發，$event:number等於總頁數。
pageChanged − 當頁面更改時觸發，$event:{page, itemsPerPage}等於包含當前頁面索引和每頁專案數的物件。

示例

由於我們將使用分頁，因此我們需要更新在ngx-bootstrap Modals章節中使用的app.module.ts，以使用PaginationModule和PaginationConfig。

更新app.module.ts以使用PaginationModule和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 { }

更新test.component.html以使用模態。

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>

更新 test.component.ts 以對應變數和方法。

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);
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 氣泡提示

ngx-bootstrap彈出視窗元件提供一個小型的覆蓋元件，以提供有關元件的小資訊。

PopoverDirective

選擇器

popover

輸入

adaptivePosition − boolean，設定停用自適應位置。
container − string，指定應將彈出視窗附加到的元素的選擇器。
containerClass − string，彈出視窗容器的Css類
delay − number，顯示工具提示之前的延遲
isOpen − boolean，返回彈出視窗當前是否顯示
outsideClick − boolean，單擊外部時關閉彈出視窗，預設值：false
placement − "top" | "bottom" | "left" | "right" | "auto" | "top left" | "top right" | "right top" | "right bottom" | "bottom right" | "bottom left" | "left bottom" | "left top"，彈出視窗的放置位置。接受："top"，"bottom"，"left"，"right"。
popover − string | TemplateRef<any>，要顯示為彈出視窗的內容。
popoverContext − any，如果彈出視窗是模板，則要使用的上下文。
popoverTitle − string，彈出視窗的標題。
triggers − string，指定應觸發的事件。支援以空格分隔的事件名稱列表。

輸出

onHidden − 彈出視窗隱藏時發出事件。
onShown − 彈出視窗顯示時發出事件。

方法

setAriaDescribedBy() − 為元素指令設定屬性aria-describedBy，併為彈出視窗設定id。
show() − 開啟元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。
hide() − 關閉元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。
toggle() − 切換元素的彈出視窗。這被認為是彈出視窗的“手動”觸發。

示例

由於我們將使用彈出視窗，因此我們需要更新在ngx-bootstrap Pagination章節中使用的app.module.ts，以使用PopoverModule和PopoverConfig。

更新app.module.ts以使用PopoverModule和PopoverConfig。

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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新test.component.html以使用模態。

test.component.html

<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint." [outsideClick]="true">
   Default Popover
</button>
<button type="button" class="btn btn-default btn-primary"
   popover="Welcome to Tutorialspoint."
   popoverTitle="Tutorialspoint" 
   [outsideClick]="true"
   placement="right">
   Right Aligned popover
</button>

更新 test.component.ts 以對應變數和方法。

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 {
   constructor() {}
   ngOnInit(): void {
   }
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 進度條

ngx-bootstrap進度條元件提供一個進度元件，用於顯示工作流程的進度，並具有靈活的條形。

ProgressbarComponent

選擇器

progressbar

輸入

animate − boolean，如果為true，則進度條的值變化將顯示動畫。
max − number，進度元素的最大總值。
striped − boolean，如果為true，則應用條紋類。
type − ProgressbarType，提供四個受支援的上下文類之一：success、info、warning、danger。
value − number | any[]，進度條的當前值。可以是數字或物件的陣列，例如{"value":15,"type":"info","label":"15 %"}。

示例

由於我們將使用進度條，因此我們需要更新在ngx-bootstrap Popover章節中使用的app.module.ts，以使用ProgressbarModule和ProgressbarConfig。

更新app.module.ts以使用ProgressbarModule和ProgressbarConfig。

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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新test.component.html以使用模態。

test.component.html

<div class="row">
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value"></progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="warning"
            [striped]="true">{{value}}%</progressbar>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="mb-2">
         <progressbar [value]="value" type="danger" 
            [striped]="true" [animate]="true"
            ><i>{{value}} / {{max}}</i></progressbar>
      </div>
   </div>
</div>

更新 test.component.ts 以對應變數和方法。

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 = 100;
   value: number = 25;
   constructor() {}

   ngOnInit(): void {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。

Ngx-Bootstrap - 評分

ngx-bootstrap評分元件提供一個可配置的評分元件，預設情況下為星級條。

RatingComponent

選擇器

rating

輸入

customTemplate − TemplateRef<any>，圖示的自定義模板。
max − number，圖示數量，預設值：5。
readonly − boolean，如果為true，則不會對任何使用者事件做出反應。
titles − string[]，圖示標題陣列，預設值：([1, 2, 3, 4, 5])

輸出

onHover − 選擇圖示時觸發，$event:number等於選擇的評分。
onLeave − 選擇圖示時觸發，$event:number等於之前的評分值。

示例

由於我們將使用評分，因此我們需要更新在ngx-bootstrap ProgressBar章節中使用的app.module.ts，以使用RatingModule和RatingConfig。

更新app.module.ts以使用RatingModule和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 { }

更新test.component.html以使用評分。

test.component.html

<rating [(ngModel)]="value" 
   [max]="max" 
   [readonly]="false" 
   [titles]="['one','two','three','four']"></rating>

更新 test.component.ts 以對應變數和方法。

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 {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 可排序

ngx-bootstrap可排序元件提供一個可配置的可排序元件，支援拖放。

SortableComponent

選擇器

bs-sortable

輸入

fieldName − string，如果輸入陣列包含物件，則為欄位名稱。
itemActiveClass − string，活動專案的類名。
itemActiveStyle − { [key: string]: string; }，活動專案的樣式物件。
itemClass − string，專案的類名
itemStyle − string，專案的類名
itemTemplate − TemplateRef<any>，用於指定自定義專案模板。模板變數：item和index;
placeholderClass − string，佔位符的類名
placeholderItem − string，如果集合為空，則顯示的佔位符專案
placeholderStyle − string，佔位符的樣式物件
wrapperClass − string，專案包裝器的類名
wrapperStyle − { [key: string]: string; }，專案包裝器的樣式物件

輸出

onChange − 陣列更改時觸發（重新排序、插入、刪除），與ngModelChange相同。返回新的專案集合作為有效負載。

示例

由於我們將使用可排序元件，因此我們需要更新在ngx-bootstrap Rating章節中使用的app.module.ts，以使用SortableModule和DraggableItemService。

更新app.module.ts以使用SortableModule和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 { }

更新styles.css以使用可排序元件的樣式。

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;
}

更新test.component.html以使用可排序元件。

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

更新 test.component.ts 以對應變數和方法。

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 {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。

Ngx-Bootstrap - 標籤頁

ngx-bootstrap選項卡元件提供易於使用且高度可配置的選項卡元件。

TabsetComponent

選擇器

tabset

輸入

justified − 布林值，如果為 true，則選項卡填充容器並具有統一的寬度。
type − 字串，導航上下文類：'tabs' 或 'pills'。
vertical − 如果為 true，則選項卡將垂直放置。

TabDirective

選擇器

tab, [tab]

輸入

active − 布林值，選項卡啟用狀態切換。
customClass − 字串，如果設定，將新增到選項卡的 class 屬性。支援多個類。
disabled − 布林值，如果為 true，則無法啟用選項卡。
heading − 字串，選項卡標題文字。
id − 字串，選項卡 ID。相同的 ID 以及字尾 '-link' 將新增到相應的
元素。
removable − 布林值，如果為 true，則選項卡可移除，將出現附加按鈕。

輸出

deselect − 選項卡變為非活動狀態時觸發，$event:Tab 等於 Tab 元件的已取消選擇的例項。
removed − 移除選項卡之前觸發，$event:Tab 等於已移除選項卡的例項。
selectTab − 選項卡變為活動狀態時觸發，$event:Tab 等於 Tab 元件的已選擇例項。

示例

由於我們將使用 Tab，因此我們必須更新 ngx-bootstrap Sortable 章節中使用的 app.module.ts 以使用 TabsModule 和 TabsetConfig。

更新 app.module.ts 以使用 TabsModule 和 TabsetConfig。

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';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule,
      TabsModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用 tabs 元件。

test.component.html

<tabset>
   <tab heading="Home">Home</tab>
   <tab *ngFor="let tabz of tabs"
      [heading]="tabz.title"
      [active]="tabz.active"
      (selectTab)="tabz.active = true"        
      [disabled]="tabz.disabled">
      {{tabz?.content}}
   </tab>
</tabset>

更新 test.component.ts 以對應變數和方法。

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 {
   tabs = [
      { title: 'First', content: 'First Tab Content' },
      { title: 'Second', content: 'Second Tab Content', active: true },
      { title: 'Third', content: 'Third Tab Content', removable: true },
      { title: 'Four', content: 'Fourth Tab Content', disabled: true }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 時間選擇器

ngx-bootstrap 時間選擇器元件提供了一個易於使用且高度可配置的時間選擇器元件。

TimepickerComponent

選擇器

timepicker

輸入

arrowkeys − 布林值，如果為 true，則可以使用鍵盤上的向上/向下箭頭鍵更改小時和分鐘的值。
disabled − 布林值，如果為 true，則小時和分鐘欄位將被停用。
hoursPlaceholder − 字串，時間選擇器中小時欄位的佔位符。
hourStep − 數字，小時變化步長。
max − 日期，使用者可以選擇的最大時間。
meridians − 字串陣列，基於區域設定的子午線標籤。
min − 日期，使用者可以選擇的最小時間。
minutesPlaceholder − 字串，時間選擇器中分鐘欄位的佔位符。
minuteStep − 數字，小時變化步長。
mousewheel − 布林值，如果為 true，則小時和分鐘輸入內的滾動將更改時間。
readonlyInput − 布林值，如果為 true，則小時和分鐘欄位將為只讀。
secondsPlaceholder − 字串，時間選擇器中秒欄位的佔位符。
secondsStep − 數字，秒變化步長。
showMeridian − 布林值，如果為 true，則將顯示子午線按鈕。
showMinutes − 布林值，在時間選擇器中顯示分鐘。
showSeconds − 布林值，在時間選擇器中顯示秒。
showSpinners − 布林值，如果為 true，則將顯示輸入上方和下方的微調器箭頭。

輸出

isValid − 如果值為有效日期，則發出 true。

示例

由於我們將使用時間選擇器，因此我們必須更新 ngx-bootstrap Tabs 章節中使用的 app.module.ts 以使用 TimepickerModule。

更新 app.module.ts 以使用 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 { }

更新 test.component.html 以使用 timepicker 元件。

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>

更新 test.component.ts 以對應變數和方法。

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 {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 工具提示

ngx-bootstrap 工具提示元件提供了一個易於使用且高度可配置的工具提示元件。

TooltipDirective

選擇器

[tooltip], [tooltipHtml]

輸入

adaptivePosition − boolean，設定停用自適應位置。
container − 字串，指定應將工具提示附加到的元素的選擇器。
containerClass − 字串，工具提示容器的 CSS 類。
delay − 數字，顯示工具提示之前的延遲。
isDisabled − 布林值，允許停用工具提示。
isOpen − 布林值，返回工具提示當前是否正在顯示。
placement − 字串，工具提示的位置。接受：“top”、“bottom”、“left”、“right”。
tooltip − 字串 | TemplateRef<any>，要顯示為工具提示的內容。
tooltipAnimation − 布林值，預設：true。
tooltipAppendToBody − 布林值。
tooltipClass − 字串。
tooltipContext − any。
tooltipEnable − 布林值。
tooltipFadeDuration − 數字，預設：150。
tooltipHtml − 字串 | TemplateRef<any>。
tooltipIsOpen − 布林值。
tooltipPlacement − 字串
tooltipPopupDelay − 數字
tooltipTrigger − 字串 | 字串陣列
triggers − string，指定應觸發的事件。支援以空格分隔的事件名稱列表。

輸出

onHidden − 工具提示隱藏時發出事件。
onShown − 工具提示顯示時發出事件。
tooltipChange − 工具提示內容更改時觸發。
tooltipStateChanged − 工具提示狀態更改時觸發。

示例

由於我們將使用工具提示，因此我們必須更新 ngx-bootstrap TimePicker 章節中使用的 app.module.ts 以使用 TooltipModule。

更新 app.module.ts 以使用 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 { }

更新 test.component.html 以使用 timepicker 元件。

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>

更新 test.component.ts 以對應變數和方法。

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 {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

Ngx-Bootstrap - 自動完成

ngx-bootstrap 自動完成指令提供了一個易於使用且高度可配置的、易於使用的自動完成元件。

TypeaheadDirective

選擇器

[typeahead]

輸入

adaptivePosition − 布林值，設定使用自適應位置。
container − 字串，指定應將自動完成附加到的元素的選擇器。
dropup − 布林值，此屬性指示應向上開啟下拉選單，預設值：false。
isAnimated − 布林值，啟用/停用動畫，預設值：false。
optionsListTemplate − TemplateRef<TypeaheadOptionListContext>，用於指定自定義選項列表模板。模板變數：matches、itemTemplate、query。
typeahead − Typeahead，選項源，可以是字串陣列、物件陣列或用於外部匹配過程的可觀察物件。
typeaheadAsync − 布林值，僅應在 typeahead 屬性為陣列的可觀察物件的情況下使用。如果為 true，則選項的載入將為非同步，否則為同步。如果選項陣列很大，則 true 更有意義。
typeaheadGroupField − 字串，當選項源為物件陣列時，包含組值的欄位的名稱，匹配項按此欄位分組（如果設定）。
typeaheadHideResultsOnBlur − 布林值，用於在失去焦點時隱藏結果。
typeaheadIsFirstItemActive − 布林值，使列表中的第一項處於活動狀態。預設值：true。
typeaheadItemTemplate − TemplateRef<TypeaheadOptionItemContext>，用於指定自定義項模板。公開的模板變數稱為 item 和 index。
typeaheadLatinize − 布林值，匹配拉丁符號。如果為 true，則單詞“súper”將匹配“super”，反之亦然。預設值：true。
typeaheadMinLength − 數字，在自動完成啟動之前需要輸入的最小字元數。當設定為 0 時，自動完成將焦點集中在包含完整選項列表（正常情況下受 typeaheadOptionsLimit 限制）上。
typeaheadMultipleSearch − 布林值，可用於搜尋多個專案，並對輸入的整個值而不是在透過 typeaheadMultipleSearchDelimiters 屬性提供的分隔符之後的值進行建議。如果 typeaheadWordDelimiters 和 typeaheadPhraseDelimiters 與 typeaheadMultipleSearchDelimiters 不同，則此選項只能與 typeaheadSingleWords 選項一起使用，以避免在確定何時分隔多個搜尋以及何時分隔單個單詞時發生衝突。
typeaheadMultipleSearchDelimiters − 字串，僅應在 typeaheadMultipleSearch 屬性為 true 的情況下使用。設定多個搜尋分隔符以知道何時開始新的搜尋。預設為逗號。如果需要使用空格，則明確將 typeaheadWordDelimiters 設定為除空格之外的其他內容，因為預設情況下使用空格，或者如果不需要與多個搜尋一起使用，則將 typeaheadSingleWords 屬性設定為 false。
typeaheadOptionField − 字串，當選項源為物件陣列時，包含選項值的欄位的名稱，如果缺少此欄位，我們將使用陣列項作為選項。支援巢狀屬性和方法。
typeaheadOptionsInScrollableView − 數字，預設值：5，指定在滾動檢視中顯示的選項數量
typeaheadOptionsLimit − 數字，選項專案列表的最大長度。預設值為 20。
typeaheadOrderBy − TypeaheadOrder，用於指定匹配項的自定義順序。當選項源為物件陣列時，必須設定用於排序的欄位。如果選項源為字串陣列，則不存在用於排序的欄位。排序方向可以更改為升序或降序。
typeaheadPhraseDelimiters − 字串，僅應在 typeaheadSingleWords 屬性為 true 的情況下使用。設定單詞分隔符以匹配精確短語。預設為單引號和雙引號。
typeaheadScrollable − 布林值，預設值：false，指定自動完成是否可滾動
typeaheadSelectFirstItem − 布林值，預設值：true，當開啟選項列表且使用者單擊 Tab 鍵時觸發。如果值為 true，則將選擇列表中的第一項或活動項。如果值為 false，則將選擇列表中的活動項或不選擇任何項。
typeaheadSingleWords − 布林值，預設值：true，可用於透過在每個字元之間插入一個空格來搜尋單詞，例如“C a l i f o r n i a”將匹配“California”。
typeaheadWaitMs − 數字，鍵入最後一個字元後，在自動完成啟動之前的最小等待時間。
typeaheadWordDelimiters − 字串，僅應在 typeaheadSingleWords 屬性為 true 的情況下使用。設定單詞分隔符以中斷單詞。預設為空格。

輸出

typeaheadLoading − 此元件的“繁忙”狀態更改時觸發，僅在非同步模式下觸發，返回布林值。
typeaheadNoResults − 在每次按鍵事件中觸發，如果未檢測到匹配項，則返回 true。
typeaheadOnBlur − 發生 blur 事件時觸發。返回活動項。
typeaheadOnSelect − 選擇選項時觸發，返回包含此選項資料的物件。

示例

由於我們將使用自動完成，因此我們必須更新 ngx-bootstrap Timepicker 章節中使用的 app.module.ts 以使用 TypeaheadModule。

更新 app.module.ts 以使用 TypeaheadModule。

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 { TypeaheadModule } from 'ngx-bootstrap/typeahead';

@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(),
      TypeaheadModule.forRoot()
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService,
      TabsetConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

更新 test.component.html 以使用 timepicker 元件。

test.component.html

<input [(ngModel)]="selectedState"
   [typeahead]="states"
   class="form-control">
<pre class="card card-block card-header mb-3">Model: {{selectedState | json}}</pre>

更新 test.component.ts 以對應變數和方法。

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 {
   selectedState: string;
   states: string[] = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado',
   'Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois',
   'Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine',
   'Maryland','Massachusetts','Michigan','Minnesota','Mississippi',
   'Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey',
   'New Mexico','New York','North Dakota','North Carolina','Ohio',
   'Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina',
   'South Dakota','Tennessee','Texas','Utah','Vermont',
   'Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
   constructor() {}
   ngOnInit(): void {
   } 
}

構建和執行

執行以下命令啟動 Angular 伺服器。

ng serve

伺服器啟動並執行後。開啟https://:4200。單擊“開啟模態”按鈕並驗證以下輸出。

列印頁面