Модальное окно

import { MdDialogRef, MdDialog } from "@angular/material";

import { Component } from "@angular/core";

@Component({

selector: 'dialog-result-example-dialog',

template: ` <h2 md-dialog-title><i class="material-icons">warning</i> {{title}} </h2>

<div md-dialog-content>{{context}}</div>

<div md-dialog-actions>

<button md-button (click)="dialogRef.close(true)">Да</button>

<button md-raised-button (click)="dialogRef.close(false)">Нет</button>

</div>

`

})

export class СonfirmationFormСomponent {

private title;

private context;

constructor(public dialogRef: MdDialogRef<СonfirmationFormСomponent>) {}

ngOnInit() {

let configData = this.dialogRef.config.data

this.title = configData.title;

this.context = configData.context;

}

}

import { NgModule } from "@angular/core";

import { MaterialModule } from "@angular/material";

import { СonfirmationFormСomponent } from "./confirmation-form.component";

@NgModule({

imports: [MaterialModule],

exports: [СonfirmationFormСomponent ],

declarations: [СonfirmationFormСomponent ],

bootstrap: [СonfirmationFormСomponent ],

})

export class СonfirmationFormModule { }

import { MdDialog, MdDialogConfig } from "@angular/material";

import { Injectable } from "@angular/core";

import { СonfirmationFormСomponent } from "./confirmation-form.component";

@Injectable()

export class ConfirmationService {

constructor(public dialog: MdDialog) { }

openDialog(_contex) {

const config = new MdDialogConfig();

config.data = _contex;

let dialogRef = this.dialog.open(СonfirmationFormСomponent, config);

return dialogRef.afterClosed();

}

}

import { NgModule } from "@angular/core";

import { MaterialModule } from "@angular/material";

import { CommonModule } from '@angular/common'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { TeamsComponent } from "./teams.component";

import { ConfirmationService } from "../../shared/service/dialog/confirmation.servise";

import { СonfirmationFormModule } from "../../shared/service/dialog/confirmation-form.module";

@NgModule({

imports: [FormsModule,

CommonModule,

ReactiveFormsModule, MaterialModule

, СonfirmationFormModule

],

exports: [TeamsComponent ],

declarations: [TeamsComponent ],

bootstrap: [TeamsComponent ],

providers: [ConfirmationService],

})

export class TeamsModule { }

constructor(private confirmationService: ConfirmationService) {}

delete(dataTeam) {

let contex =

{

title: ['Внимание!'],

context: ['Указанный элемент данных будет безвозвратно удален. ']

}

this.confirmationService.openDialog(contex).subscribe(

res => {

if (Boolean(res)) {

let index = this.teamsList.indexOf(dataTeam);

if (index != -1)

this.teamsList.splice(index, 1);

}})}