脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular ngbootstrap

详解在Angular项目中添加插件ng-bootstrap

 更新时间：2017年07月04日 09:27:04   作者：1CSH1  
这篇文章主要介绍了详解在 Angular 项目中添加插件 ng-bootstrap，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

npm 安装 ng-bootstrap 模块

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

在 Angular 项目配置

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>

测试结果

示例代码

angular + ng-bootstrap

参考文章

NG Bootstrap - Angular directives specific to Bootstrap 4

Bootstrap 4 components, powered by Angular

ngx-translate core

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Angular6封装http请求的步骤详解

    Angular6封装http请求的步骤详解

    最近抽空学习了一下Angular6，之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装，今天主要就跟大家讲一下这个http模块
    2018-08-08
  • Angular中$broadcast和$emit的使用方法详解

    Angular中$broadcast和$emit的使用方法详解

    本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • AngularJS 中的事件详解

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
    2016-07-07
  • Angular服务Request异步请求的实例讲解

    Angular服务Request异步请求的实例讲解

    今天小编就为大家分享一篇Angular服务Request异步请求的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Angular将填入表单的数据渲染到表格的方法

    Angular将填入表单的数据渲染到表格的方法

    这篇文章主要介绍了Angular将填入表单的数据渲染到表格的方法，非常具有实用价值，需要的朋友可以参考下
    2017-09-09
  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    Angularjs中$http以post请求通过消息体传递参数的实现方法

    这篇文章主要介绍了Angularjs中$http以post请求通过消息体传递参数的方法,结合实例形式分析了$http使用post请求传递参数的相关设置与使用技巧,需要的朋友可以参考下
    2016-08-08
  • Angular封装搜索框组件操作示例

    Angular封装搜索框组件操作示例

    这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下
    2019-04-04
  • 详解Angular模板引用变量及其作用域

    详解Angular模板引用变量及其作用域

    这篇文章主要介绍了详解Angular模板引用变量及其作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 如何使用angularJs

    如何使用angularJs

    本篇文章主要介绍了一些AngularJs常用的一些属性和方法，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • AngularJS中取消对HTML片段转义的方法例子

    AngularJS中取消对HTML片段转义的方法例子

    这篇文章主要介绍了AngularJS中取消对HTML片段转义的方法例子,在一些需要显示HTML的地方,就要取消AngularJS的转义,本文就介绍了这种方法,需要的朋友可以参考下
    2015-01-01

最新评论