File

src/app/materials/dialogs/dialogs.component.ts

Implements

OnInit

Metadata

selector app-dialogs
styleUrls ./dialogs.component.scss
templateUrl ./dialogs.component.html

Index

Methods

Constructor

constructor(dialog: DialogService)
Parameters :
Name Type Optional
dialog DialogService No

Methods

ngOnInit
ngOnInit()
Returns : void
openAlert
openAlert()
Returns : void
openConfirm
openConfirm()
Returns : void
openDialog
openDialog()
Returns : void
import { Component, OnInit } from '@angular/core';
import { DialogService } from '../../component/dialog';

@Component({
  selector: 'app-dialogs',
  templateUrl: './dialogs.component.html',
  styleUrls: ['./dialogs.component.scss']
})
export class DialogsComponent implements OnInit {
  constructor(private dialog: DialogService) {}

  ngOnInit() {}

  openDialog() {
    this.dialog.open(DialogsComponent, {
      width: '400px'
    });
  }

  openAlert() {
    this.dialog.alert({
      title: 'title',
      message: 'message',
      closeButton: '确定'
    });
  }

  openConfirm() {
    this.dialog.confirm({
      title: 'title',
      message: 'message',
      cancelButton: '取消',
      acceptButton: '确定'
    });
  }
}
<mat-card>
  <mat-card-title>Dialog</mat-card-title>
  <mat-card-content>
    <button mat-raised-button type="button" (click)="openDialog()" color="primary">dialog</button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Alert Dialog</mat-card-title>
  <mat-card-content>
    <button mat-raised-button type="button" (click)="openAlert()" color="primary">alert</button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Confirm Dialog</mat-card-title>
  <mat-card-content>
    <button mat-raised-button type="button" (click)="openConfirm()" color="primary">confirm</button>
  </mat-card-content>
</mat-card>

./dialogs.component.scss

:host {
  display: block;
}

mat-card {
  margin: 20px;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""