• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2022, 2025
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

Az Angular Material egy UI komponens gyűjtemény, amit Google készít. A fejlesztéskor a Material Design alapelveit használták.

A gyűjtemény gombokat, beviteli mezőket és hasonló eszközöket tartalmaz. A használni kívánt eszközöket TypeScript oldali importálás követően a HTML sablonban építjük be, új HTML elemek és attribútumok formájában.

Az Angular Material nem kínál megoldást oszlop és sorszerkezetek létrehozására. Erre a célra a CSS flexdobozai ajánlottak.

Az Angular Material-t hozzá kell adnunk a projekthez, amit célszerű az ng paranccsal megtenni.

Telepítés:

ng add @angular/material

Telepítéskor rákérdez, milyen témát szeretnénk választani.

? Choose a prebuilt theme name, or "custom" for a custom
 theme: (Use arrow keys)
❯ Azure/Blue         [Preview: 
https://material.angular.io?theme=azure-blue]
  Rose/Red           [Preview:
https://material.angular.io?theme=rose-red]
  Magenta/Violet     [Preview:
https://material.angular.io?theme=magenta-violet]
  Cyan/Orange        [Preview:
https://material.angular.io?theme=cyan-orange]
  Custom

Következő kérdés, hogy globálisan szeretnénk-e használni a tipográfiai stílusokat:

? Set up global Angular Material typography styles?
(y/N)

Majd: animációt is szeretnénk-e engedélyezni:

? Include the Angular animations module?
❯ Include and enable animations
  Include, but disable animations
  Do not include

Tegyük fel, hogy az app.component.html fájlba szeretnénk használni. Importálni kell a .ts fájlban állomány és dekorátor szinten is.

src/app/app.component.ts

import {MatButtonModule} from '@angular/material/button';
/* ... */
  imports: [RouterOutlet,
    MatButtonModule    
  ],

A button elem számára egy mat-button attribútumot adunk:

src/app/app.component.html

<h1>Példa</h1>
<button mat-button>Mehet</button>

Ellenőrizzük a gomb kinézetét.

Használhatunk mat-raised, mat-flat és hasonló attribútumokat is, amelyek más-más kinézetet adnak a gombnak.

src/app/app.component.html

<h1>Példa</h1>
<button mat-raised-button>Mehet</button>
<button mat-flat-button >Mehet</button>
<button mat-stroked-button >Mehet</button>

<button 
    mat-flat-button 
    color="warn"
>
Mehet</button>

Színek:

• primary: Elsődleges színséma.
• accent: Másodlagos színséma hangsúlyozáshoz.
• warn: Figyelmeztető színséma.

A képen mat-flat-button attribútummal létrehozott gombokat látunk:

A mat-raised-button esetén csak a szövegek színe lesz beállítva.

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
 
  imports: [
    MatButtonModule,
    MatIconModule
  ],

<button mat-icon-button color="primary">
  <mat-icon>info</mat-icon>
</button>

<button mat-fab color="primary">
  <mat-icon>info</mat-icon>
</button>

Néhány népszerű ikonok:

• Navigáció: menu, arrow_back, arrow_forward
• Műveletek: add, delete, edit, done, share
• Kommunikáció: mail, call, comment
• Fájlok: folder, insert_drive_file
• Média: play_arrow, pause, stop
• Beállítások: settings, account_circle, search

A teljes ikongyűjtemény:

• https://fonts.google.com/icons (2025)

<button mat-button routerLink="home">Főoldal</button>
 
<button mat-button routerLink="employees">Dolgozók</button>
 
<button mat-button routerLink="tasks">Feladatok</button>
 
<button mat-button routerLink="admin">Admin</button>

Az app.component.ts fájlba felvesszük:

import {MatInputModule} from '@angular/material/input';
 
  imports: [RouterOutlet,
    MatInputModule
  ],

A HTML sablonban:

<form>
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Alap</mat-label>
    <input matInput placeholder="alap" value="30">
  </mat-form-field>
 
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Magasság</mat-label>
    <input matInput placeholder="magasság" value="35">
  </mat-form-field>
</form>

//...
 
import { 
  MatInputModule,
  MatFormField
} from '@angular/material/input';
 
import { MatSelectModule } from '@angular/material/select';
 
//...
  imports: [
    //...
    MatInputModule,
    MatFormField,
    MatSelectModule
  ]

<mat-form-field>
  <mat-label>Input</mat-label>
  <input matInput>
</mat-form-field>
<mat-form-field>
  <mat-label>Válassz</mat-label>
  <mat-select>
    <mat-option value="one">Első lehetőség</mat-option>
    <mat-option value="two">Második lehetőség</mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
  <mat-label>Textarea</mat-label>
  <textarea matInput></textarea>
</mat-form-field>

:host {
  display: flex;           /* Rugalmas dobozok használata. */
  flex-direction: column;  /* Egymás alatt jelenjenek meg a dobozok. */
  align-items: flex-start; /* Ne foglalják el a rendelkezésre álló helyet
                              csak saját méretük legyen, balra igazítva. */
}

A :host az aktuális Angular komponenst jelöli.

Hivatalos dokumentáció:

• https://material.angular.dev/components/form-field/overview (2025)

A következő képen láthatjuk a toggle button kinézetét.

A használathoz a MatSlideToggleModule-ra van szükségünk.

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
  imports: [
    //...
    MatSlideToggleModule
  ],

A HTML sablonvan egy mat-slide-toggle elemet használhatunk.

<mat-slide-toggle>Kapcsolás</mat-slide-toggle>

TypeScript oldalon általában szeretnénk ennek a gombnak az állapotát kiolvasni. Ehhez kötést kell létrehozni egy változóhoz.

TypeScriptbe kötés példa:

import { FormsModule } from '@angular/forms';
 
  imports: [
    FormsModule
  ],
 
//...
 
export class AppComponent {
  isToggled = true;
}

<mat-slide-toggle
[(ngModel)]="isToggled"
>
Kapcsolás
</mat-slide-toggle>

src/app/app.component.html

<button 
mat-raised-button 
(click)="openDialog('1000ms', '400ms')">
Törlés</button>

src/app/app.component.ts

import { ChangeDetectionStrategy,Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { 
  MatDialog,
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle
} from '@angular/material/dialog';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    MatButtonModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  readonly dialog = inject(MatDialog);
 
  openDialog(
    enterAnimationDuration: string, 
    exitAnimationDuration: string): void {
 
    const dialogRef = this.dialog.open(Dialog, {
      width: '250px',
      enterAnimationDuration,
      exitAnimationDuration,
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('Eredmény:', result);
      if(result === 'Igen') {
        console.log('Törlés...');
      }
    })
  }
}
 
@Component({
  selector: 'dialog',
  templateUrl: 'dialog.html',
  standalone: true,
  imports: [MatButtonModule, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialogContent],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Dialog {
  readonly dialogRef = inject(MatDialogRef<Dialog>);
}

src/app/app.component.css

button {
  margin-right: 8px;
}

src/app/dialog.html

<h2 mat-dialog-title>Érték törlése</h2>
<mat-dialog-content>
  Törlöd ezt az értékekt?
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button mat-dialog-close >Nem</button>
  <button mat-raised-button mat-dialog-close="Igen" cdkFocusInitial>Igen</button>
</mat-dialog-actions>

Hivatalos dokumentáció:

• https://material.angular.dev/components/dialog/overview (2025)

src/app/app.config.ts

//...
import { 
  MAT_DATE_LOCALE, 
  provideNativeDateAdapter
} from '@angular/material/core';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), 
    provideAnimationsAsync(),
 
    provideNativeDateAdapter(),
    { provide: MAT_DATE_LOCALE, useValue: 'hu' },
 
  ]
};

src/app/app.component.ts

//...
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
 
//...
  imports: [
    MatDatepickerModule,
    MatFormFieldModule
  ],
 
//...

src/app/app.component.html

<mat-form-field>
  <mat-label>Tartomány</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-hint>YYYY-MM-DD - YYYY-MM-DD</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

Hivatalos dokumentáció:

• https://material.angular.dev/components/datepicker/overview (2025)

Az Angular Material telepítéskor rákérdez a témára. Ez a téma később is megváltoztatható az angular.json fájlban. Keressük meg a styles kulcsot.

angular.json

"styles": [
  "@angular/material/prebuilt-themes/cyan-orange.css",
  "src/styles.css"
],

A node_modules könyvtárban keressük meg a betölthető témákat:

node_modules/@angular/material/prebuilt-themes/

Példa:

• azure-blue.css

Állítsuk be a kívánt témát.

Mivel az Angular Material nem rendelkezik sor és oszlop elrendezési lehetőséggel, flex dobozok használatát ajánlják CSS-ből beállítva.

Lássunk erre egy egyszerű példát:

.container {
  margin-inline: 5%;
  padding-inline: 1.5rem;
}
 
.row {
  display: flex;
  margin-inline: -12px;
}
 
.col {
  padding-inline: 12px;
  width: 100%;
}

<div class="container">
 
  <div class="row">
    <div class="col primary">
      aaa
    </div>
    <div class="col">
      bbb
    </div>
  </div>
 
  <div class="row">
    <div class="col">
      ccc
    </div>
    <div class="col">
      ddd
    </div>
  </div>
 
</div>

• https://material.angular.io/guide/getting-started