material

import material style

<mat-form-field>
  <mat-label>Input</mat-label>
  <input matInput>
</mat-form-field>

<mat-form-field>
  <mat-label>Select</mat-label>
  <mat-select>
    <mat-option value="one">First option</mat-option>
    <mat-option value="two">Second option</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Textarea</mat-label>
  <textarea matInput></textarea>
</mat-form-field>

floatLabel

<!-- never auto always -->
<mat-form-field
    [hideRequiredMarker]="hideRequiredControl.value"
    [floatLabel]="getFloatLabelValue()">
	<input matInput placeholder="Simple placeholder" required>
</mat-form-field>

providers: [
  {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}
]

Datepicker

changeEvent

<input (dateChange)="change()"/>

<mat-form-field appearance="fill">
  <mat-label>Input & change events</mat-label>
  <input matInput [matDatepicker]="picker"
         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<div class="example-events">
  <div *ngFor="let e of events">{{e}}</div>
</div>

import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

/** @title Datepicker input and change events */
@Component({
  selector: 'datepicker-events-example',
  templateUrl: 'datepicker-events-example.html',
  styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample {
  events: string[] = [];
  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.events.push(`${type}: ${event.value}`);
  }
}

customer svg icon

用此方式可以把原本的圖片轉為用 mat icon 的方式使用，可以給變 color, font-size 等等。html 上面也是 svg 的 img，但是每次的 request 就會多打一個要圖片的 api。

import { HttpClientModule } from "@angular/common/http";
@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}

import { Component } from '@angular/core';
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      "musicon",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/headphone.svg")
    );
  }
}

<mat-icon svgIcon="musicon"></mat-icon>

參考文章

dialog

constructor(
	public dialogRef: MatDialogRef<CouponListComponent>,
) {}

const dialogRef = this.dialog.open(GeneralDialogComponent, {
	data: {
		title: 'cart.merge_cart.dialog.title',
	},
  autoFocus: false, // 打開 dialog 的時候不作 focus
});

// dialogRef.componentInstance 可以用這種方式取得 dialog 的實體，然後傳 input 的值進去

// dialog ts
export interface DialogData {
    title: '';
}
constructor(
	@Inject(MAT_DIALOG_DATA) public data: DialogData, // 接到由 data 傳下來的資料
  public dialogRef: MatDialogRef<GeneralDialogComponent>
){}

Radio button focus in dialog

1. 在打開對話框之前，首先獲取對話框中的表單控制項，並將其標記為 "未觸碰" 和 "未修改" 狀態。

typescriptCopy code
import { FormGroup } from '@angular/forms';

// 在打開對話框之前
const dialogForm: FormGroup = new FormGroup({
  // 表單控制項
});

dialogForm.markAsUntouched();
dialogForm.markAsPristine();

2. 當您打開對話框時，將表單控制項與對話框關聯起來，以便在對話框中使用表單。

typescriptCopy code
import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

openDialog(): void {
  const dialogRef = this.dialog.open(YourDialogComponent, {
    // 對話框設置
    data: {
      form: dialogForm // 傳遞表單控制項
    }
  });
}

3. 在對話框組件中，接收表單控制項的參數，並在需要時設置表單為 "未觸碰" 和 "未修改" 狀態。

typescriptCopy code
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormGroup } from '@angular/forms';

@Component({
  // 組件配置
})
export class YourDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { form: FormGroup }) {}

  onDialogOpened(): void {
    this.data.form.markAsUntouched();
    this.data.form.markAsPristine();
  }
}

❤️ 把 form 傳到 dialog 有一個好處，當我們把 dialog 關掉時，再次打開時原本的資料可以延續不會因為實體不見的時候而不見。