文档章节

angular2 ngbootstrap 模态框用法

今天来找bug
 今天来找bug
发布于 2016/10/17 17:37
字数 192
阅读 3541
收藏 1
import {Component, ViewEncapsulation} from "@angular/core";
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'model-test',
    encapsulation: ViewEncapsulation.None,
    styles: [`
    .dark-modal .modal-content {
      background-color: #2b669a;
      color: white;
    }
  `],
    templateUrl: './model.component.html'
})

export class ModelTestComponent {

    username: string;
    password: string;
    model: any;

    constructor(private modalService: NgbModal) {}

    open(content) {
        this.model = this.modalService.open(content, { windowClass: 'dark-modal',size: 'lg'});
    }

    submit() {
        this.model.close();
    }
}
<template ngbModalContainer></template>

<template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
        let-c="close" let-d="dismiss"
        输入用户名:<input class="form-control" [(ngModel)]="username">
        输入密码:<input type="password" class="form-control" [(ngModel)]="password">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="submit()">提交</button>
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
    </div>
</template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">打开模态框</button>

© 著作权归作者所有

今天来找bug
粉丝 10
博文 214
码字总数 36040
作品 0
深圳
程序员
私信 提问
加载中

评论(2)

今天来找bug
今天来找bug 博主

引用来自“郭松涛”的评论

哎,这个要angular4才能用。
这种第三方组件挺多的,像阿里的佐罗https://ng.ant.design/ ,ngx-bootstrap https://valor-software.com/ngx-bootstrap/,本文用的ng2-bootstrap就是ngx-bootstrap的更早的版本,现在都是支持angular4
郭松涛
郭松涛
哎,这个要angular4才能用。
让开发更快更顺畅的 VS Code 插件推荐(一)

Microsoft 推出的代码编辑器 Visual Studio Code 为开发者提供了许多实用的工具和插件扩展,大家可以根据自己的需求打造自己的编辑器。Visual Studio Code 定期更新插件扩展,你可以在它的 ...

oschina
2017/05/10
52.3K
13
Angular中sweetalert弹框的使用详解

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了。所以我就想办法将sweetalert用到项目中,在项目中引入sweetaler...

半指温柔乐
2018/07/21
0
0
angularStrap 兼容 ie8

@Yamazaki 你好,想跟你请教个问题:我最近在使用angular写一个页面,需要用到模态框展示信息,之前用的ui-bootstrap,也是一个angular的插件,但是在ie8中还是有问题,而且ie8还不会报错,都...

今天来找bug
2015/12/01
270
1
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
2018/08/05
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部