快捷導(dǎo)航

詳解在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";

測試

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>

測試結(jié)果

示例代碼

angular + ng-bootstrap

參考文章

NG Bootstrap - Angular directives specific to Bootstrap 4

Bootstrap 4 components, powered by Angular

ngx-translate core

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

您可能感興趣的文章:

相關(guān)文章

angular2模塊和共享模塊詳解
這篇文章主要介紹了angular2模塊和共享模塊詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
Angular利用HTTP POST下載流文件的步驟記錄
這篇文章主要給大家介紹了關(guān)于Angular利用HTTP POST下載流文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
AngularJS入門教程（二）：AngularJS模板
這篇文章主要介紹了AngularJS入門教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列會(huì)用一個(gè)項(xiàng)目來講解AngularJS的使用,需要的朋友可以參考下
2014-12-12
詳解基于angular-cli配置代理解決跨域請求問題
本篇文章主要介紹了詳解基于angular-cli配置代理解決跨域請求問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-04-04
AngularJS 面試題集錦
本文主要介紹AngularJS的面試題資料整理，這里整理了相關(guān)面試題的資料，幫助大家學(xué)習(xí)理解AngularJS的知識(shí)，有興趣的小伙伴可以參考下
2016-09-09
Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
這篇文章主要介紹了Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-12-12
AngularJS實(shí)現(xiàn)select的ng-options功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)select的ng-options功能,結(jié)合實(shí)例形式分析了AngularJS使用ng-options操作select列表的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-07-07
對angularJs中$sce服務(wù)安全顯示html文本的實(shí)例
今天小編就為大家分享一篇對angularJs中$sce服務(wù)安全顯示html文本的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
總結(jié)十個(gè)Angular.js由淺入深的面試問題
這篇文章雖然只有10個(gè)問題，但是覆蓋了angular開發(fā)中的各個(gè)方面，有基本的知識(shí)點(diǎn)，也有在開發(fā)過程中遇見的問題，同時(shí)也有較為開放性的問題去辨別面試者的基礎(chǔ)水準(zhǔn)和項(xiàng)目經(jīng)驗(yàn)，注意答案僅供參考哦～
2016-08-08