angular-material-app documentation
  1. Components
  2. NewComponent

File

src/app/apm/manage/new/new.component.ts

Implements

OnInit

Metadata

selector apm-manage-new
styleUrls ./new.component.scss
templateUrl ./new.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, data: any)
Defined in src/app/apm/manage/new/new.component.ts:9
Parameters :
Name Type Optional
dialogRef MatDialogRef<NewComponent> No
data any No

Methods

ngOnInit
ngOnInit()
Defined in src/app/apm/manage/new/new.component.ts:19
Returns : void
onNoClick
onNoClick()
Defined in src/app/apm/manage/new/new.component.ts:15
Returns : void

Properties

Public data
Type : any
Decorators :
@Inject(MAT_DIALOG_DATA)
Defined in src/app/apm/manage/new/new.component.ts:12
Public dialogRef
Type : MatDialogRef<NewComponent>
Defined in src/app/apm/manage/new/new.component.ts:11
 
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'apm-manage-new',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.scss']
})
export class NewComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<NewComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  ngOnInit() {
    console.log(this.data);
  }
}
Copy
<h2 mat-dialog-title>添加</h2>
<mat-dialog-content>
  <form>
    <mat-form-field class="display-block">
      <input
        type="email"
        id="email"
        class="input"
        placeholder="请输入您的应用名称"
        required
        matInput
      />
    </mat-form-field>

    <mat-form-field class="display-block">
      <input
        type="text"
        id="password"
        class="input"
        placeholder="嵌入代码"
        required
        matInput
      />
    </mat-form-field>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>取消</button>
  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>保存</button>
</mat-dialog-actions>
Copy

./new.component.scss 

.display-block {
  display: block;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""