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

File

src/app/mail/compose/compose.component.ts

Implements

OnInit

Metadata

selector app-mail-compose
styleUrls ./compose.component.scss
templateUrl ./compose.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef)
Defined in src/app/mail/compose/compose.component.ts:14
Parameters :
Name Type Optional
dialogRef MatDialogRef<ComposeComponent> No

Methods

ngOnInit
ngOnInit()
Defined in src/app/mail/compose/compose.component.ts:18
Returns : void
send
send()
Defined in src/app/mail/compose/compose.component.ts:20
Returns : void

Properties

address
Type : string
Default value : 'stbui@stbui.com'
Defined in src/app/mail/compose/compose.component.ts:12
content
Type : string
Defined in src/app/mail/compose/compose.component.ts:14
mail
Defined in src/app/mail/compose/compose.component.ts:10
name
Type : string
Defined in src/app/mail/compose/compose.component.ts:11
subject
Type : string
Defined in src/app/mail/compose/compose.component.ts:13
 
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-mail-compose',
  templateUrl: './compose.component.html',
  styleUrls: ['./compose.component.scss']
})
export class ComposeComponent implements OnInit {
  mail;
  name: string;
  address: string = 'stbui@stbui.com';
  subject: string;
  content: string;

  constructor(private dialogRef: MatDialogRef<ComposeComponent>) {}

  ngOnInit() {}

  send() {
    this.mail = {
      from: {
        name: this.name,
        mail: this.address
      },
      subject: this.subject,
      content: this.content
    };

    console.log(this.mail, this.name, this.subject);
    this.dialogRef.close(this.mail);
  }
}
Copy
<div class="inbox-compose">
  <div mat-dialog-content fxLayout="row" fxLayoutAlign="space-between center">
    <span>写信</span>
    <button mat-dialog-close mat-icon-button><mat-icon>close</mat-icon></button>
  </div>

  <form #mailForm="ngForm">
    <div fxLayout="column" mat-dialog-content>
      <mat-form-field class="display-block">
        <input
          matInput
          placeholder="收件人"
          name="name"
          [(ngModel)]="name"
          required
        />
      </mat-form-field>
      <mat-form-field class="display-block">
        <input
          matInput
          placeholder="发件人"
          disabled
          name="address"
          [(ngModel)]="address"
          required
        />
      </mat-form-field>
      <mat-form-field class="display-block">
        <input
          matInput
          placeholder="主题"
          name="subject"
          [(ngModel)]="subject"
          required
        />
      </mat-form-field>
      <p class="editor">
        <quill-editor name="content" [(ngModel)]="content"></quill-editor>
      </p>
    </div>

    <div mat-dialog-actions fxLayout="row">
      <button mat-dialog-close mat-icon-button>
        <mat-icon>delete</mat-icon>
      </button>
      <span fxFlex></span>
      <button mat-icon-button><mat-icon>attachment</mat-icon></button>
      <button
        class="send"
        mat-raised-button
        color="primary"
        [disabled]="!mailForm.valid"
        (click)="send()"
      >
        发送 <mat-icon>send</mat-icon>
      </button>
    </div>
  </form>
</div>
Copy

./compose.component.scss 

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

result-matching ""

    No results matching ""