Как создать модальное всплывающее окно, совместимое с Angular 4

Я хочу создать всплывающее окно, которое будет загружать определенный компонент Angular 4, когда будет выбран переключатель.

Похоже, что методы, перечисленные в ответах на этот question, совместимы только с Angular 2.

Я не уверен, с чего начать и буду признателен за любую помощь!

Ответ 1

Отметьте Angular Material Dialogue, вот Plunker

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}