脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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

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

您可能感兴趣的文章:

相关文章

  • angular2模块和共享模块详解

    angular2模块和共享模块详解

    这篇文章主要介绍了angular2模块和共享模块详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular利用HTTP POST下载流文件的步骤记录

    Angular利用HTTP POST下载流文件的步骤记录

    这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-07-07
  • AngularJS入门教程（二）：AngularJS模板

    AngularJS入门教程（二）：AngularJS模板

    这篇文章主要介绍了AngularJS入门教程（二）：AngularJS模板,本文是系列文章的第三篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下
    2014-12-12
  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    本篇文章主要介绍了详解基于angular-cli配置代理解决跨域请求问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • angular中实现控制器之间传递参数的方式

    angular中实现控制器之间传递参数的方式

    本篇文章主要介绍了angular中实现控制器之间传递参数的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • AngularJS 面试题集锦

    AngularJS 面试题集锦

    本文主要介绍AngularJS的面试题资料整理，这里整理了相关面试题的资料，帮助大家学习理解AngularJS的知识，有兴趣的小伙伴可以参考下
    2016-09-09
  • Angular JS数据的双向绑定详解及实例

    Angular JS数据的双向绑定详解及实例

    这篇文章主要介绍了Angular JS数据的双向绑定详解及实例的相关资料,需要的朋友可以参考下
    2016-12-12
  • AngularJS实现select的ng-options功能示例

    AngularJS实现select的ng-options功能示例

    这篇文章主要介绍了AngularJS实现select的ng-options功能,结合实例形式分析了AngularJS使用ng-options操作select列表的相关实现技巧,需要的朋友可以参考下
    2017-07-07
  • 对angularJs中$sce服务安全显示html文本的实例

    对angularJs中$sce服务安全显示html文本的实例

    今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 总结十个Angular.js由浅入深的面试问题

    总结十个Angular.js由浅入深的面试问题

    这篇文章虽然只有10个问题，但是覆盖了angular开发中的各个方面，有基本的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题去辨别面试者的基础水准和项目经验，注意答案仅供参考哦～
    2016-08-08

最新评论