在 Angular 项目中添加插件 ng-bootstrap
来源:互联网 发布:游戏编程教学 编辑:程序博客网 时间:2024/06/06 23:51
个人博客原文:在 Angular 项目中添加插件 ng-bootstrap
摘要:本文将介绍在 Angular4 项目中配置 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
阅读全文
0 0
- 在 Angular 项目中添加插件 ng-bootstrap
- 【Angular】Angular项目添加ng-bootstrap插件
- 在 Angular 项目中添加 i18n 插件 ngx-translate
- 在 Angular 项目中添加 clean-blog 模板
- Angular CLI --添加bootstrap
- angular-bootstrap-ui's pagination ng-change 事件在页面加载时会执行两次
- ng中在主页面弹出bootstrap的modal
- 《Angular2入门系列实践》——如何添加ng-bootstrap插件
- 关于在已有项目中手动添加cordova插件
- angular拖动插件——ng-drag、ng-drop
- 在 Angular 项目中配置 Wijmo5
- 在Angular项目中使用PrimeNG组件
- ionic添加ng-cordova插件
- [转]可考虑在你下一个项目中使用的 50 个 Bootstrap 插件
- Angular 2 版本的 ng-bootstrap 初体验
- 坑:在angular内使用DOM操作添加元素,被添加的元素不再具有使用ng指令的能力
- eclipse 中 angular指令在页面中显示 Undefined attribute name (ng-model)
- 在Eclipse中添加插件
- 存储器层次结构的四个问题
- 记一次sql慢查询
- Linux基础—命令的组成规则及其全拼单词
- IMU数据融合---待补充
- CSS实现垂直居中的常用方法
- 在 Angular 项目中添加插件 ng-bootstrap
- Android之Service介绍
- 浅谈 TypeScript 特性 (二)
- ESRI2017总结(深度好文有彩蛋——数据处理服务方案总结)
- HDU4009 最小树形图 有向最小生成树
- Unity3D实训Day1
- 桶排序
- 【Mongo】MongoDB-Profiler
- jsp中request内置对象