詳解在Angular項(xiàng)目中添加插件ng-bootstrap

更新時(shí)間：2017年07月04日 09:27:04 作者：1CSH1

這篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加插件 ng-bootstrap，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

npm 安裝 ng-bootstrap 模塊

npm install @ng-bootstrap/ng-bootstrap --save

在 Angular 項(xiàng)目配置

app.module.ts

添加

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

 imports: [
  /**
   * ngx-bootstrap
   */
  NgbModule.forRoot()
 ],

添加 bootstrap.min.css 樣式

在 assets 文件夾下 bootstrap/bootstrap.min.css ，并在 style.css 文件中添加

@import "assets/bootstrap/bootstrap.min.css";

測(cè)試

app.component.html

添加代碼：

<div>
 <span> test the ng-bootstrap</span>
 <div [(ngModel)]="model" ngbRadioGroup name="radioBasic">
  <label class="btn btn-primary">
   <input type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label class="btn btn-primary">
   <input type="radio" value="middle"> Middle
  </label>
  <label class="btn btn-primary">
   <input type="radio" [value]="false"> Right
  </label>
 </div>
 <hr>
 <pre>{{model}}</pre>
</div>

測(cè)試結(jié)果

示例代碼

angular + ng-bootstrap

參考文章

NG Bootstrap - Angular directives specific to Bootstrap 4

Bootstrap 4 components, powered by Angular

ngx-translate core

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular6封裝http請(qǐng)求的步驟詳解
最近抽空學(xué)習(xí)了一下Angular6，之前主要使用的是vue，所以免不了的也想對(duì)Angular6提供的工具進(jìn)行一些封裝，今天主要就跟大家講一下這個(gè)http模塊
2018-08-08
Angular中$broadcast和$emit的使用方法詳解
本篇文章主要介紹了Angular中$broadcast和$emit的使用方法詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
AngularJS 中的事件詳解
本文主要介紹AngularJS 事件,這里整理了相關(guān)資料,比較詳細(xì)的介紹了AngularJS的使用方法,有需要的小伙伴參考下
2016-07-07
Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解
今天小編就為大家分享一篇Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請(qǐng)求通過(guò)消息體傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了$http使用post請(qǐng)求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-08-08
Angular封裝搜索框組件操作示例
這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實(shí)例形式分析了基于Angular組件庫(kù)實(shí)現(xiàn)搜索功能的封裝操作相關(guān)實(shí)現(xiàn)步驟與注意事項(xiàng),需要的朋友可以參考下
2019-04-04
詳解Angular模板引用變量及其作用域
這篇文章主要介紹了詳解Angular模板引用變量及其作用域，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
如何使用angularJs
本篇文章主要介紹了一些AngularJs常用的一些屬性和方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05
AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下
2015-01-01