如何在Angularjs 2中添加模态弹出窗口

时间:2017-04-25 13:30:56

标签: angular

如何在Angularjs 2中导入和显示模态弹出窗口我也希望在弹出窗口中显示tr值。

我是Angularjs的新人。请指导我如何实现这个

environment_app.component.ts

import {Component} from "angular2/core";

@Component({
   selector: 'my-app',
   templateUrl: 'app/hello.component.html'
})

export class AppComponent {
     constructor() {     

     }
     removeItem(index){
        this.itemList.splice(index, 1);
     }

    IsHidden= false;
    onSelect(item){
        item.IsHidden = !item.IsHidden;
    }

}

environment_main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);

html

**

<div class="container">
<br><br><br>
<h2>Customer Order Report</h2>
<table class="table table-striped" *ngIf="itemList.length">
    <thead>
      <tr>
        <th class="text-center">S.No</th>
        <th class="text-center">Name</th>
        <th class="text-center">Email</th>
        <th class="text-center">City</th>
        <th class="text-center">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="#item of itemList; #i = index">
        <td class="text-center">{{i+1}}</td>
        <td class="text-center">{{item.name}}</td>
        <td class="text-center">{{item.email}}</td>
        <td class="text-center">{{item.city}}</td>
        <td class="text-center"><span (click)="removeItem($index)" class="glyphicon glyphicon-remove pointer"></span>
        <span>Edit</span></td>
      </tr>     
    </tbody>
  </table>
    <div *ngIf="!itemList.length" class="nodata"> No Data Available........</div>
</div>

如何实现这个?

你能解释一下吗

1 个答案:

答案 0 :(得分:0)

您可以使用第三方弹出窗口,例如ngPrime或angular2材质。您可以阅读他们的README.md了解详情或访问他们的网站