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


Posted in Javascript onJuly 04, 2017

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

示例代码

angular + ng-bootstrap

参考文章

NG Bootstrap - Angular directives specific to Bootstrap 4

Bootstrap 4 components, powered by Angular

ngx-translate core

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 #Javascript
Node.js使用gm拼装sprite图片
Jul 04 #Javascript
JavaScript中document.referrer的用法详解
Jul 04 #Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 #Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
You might like
PHP中用hash实现的数组
2011/07/17 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php定时执行任务设置详解
2015/02/06 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
超清晰的document对象详解
2007/02/27 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
浅谈Python 参数与变量
2020/06/20 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python函数调用追踪实现代码
2020/11/27 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
机械专业毕业生推荐信范文
2013/11/25 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
产品发布会策划方案
2014/05/12 职场文书
青年教师师德演讲稿
2014/08/26 职场文书