[[oktatas:web:angular|< Angular]]

====== Angular Material ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Az Angular Material =====

Az **[[https://material.angular.dev/|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 [[oktatas:web:css:css_flex|CSS flexdobozai]] ajánlottak. 
===== Telepítés =====

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.

<code>
? 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
</code>

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

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

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

<code>
? Include the Angular animations module?
❯ Include and enable animations
  Include, but disable animations
  Do not include
</code>

==== Használat adott komponensben ====

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.

<code javascript src/app/app.component.ts>
import {MatButtonModule} from '@angular/material/button';
/* ... */
  imports: [RouterOutlet,
    MatButtonModule    
  ],
</code>

===== A modul használata =====

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

<code html src/app/app.component.html>
<h1>Példa</h1>
<button mat-button>Mehet</button>
</code>

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.

<code html 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>
</code>

{{:oktatas:web:angular:angular_meterial_buttons.png?100|}}



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

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:

{{:oktatas:web:angular:angular_material_colors.png?100|}}

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

{{:oktatas:web:angular:angular_material_colors-2.png?100|}}

===== Button-ikon =====

{{:oktatas:web:angular:angular_material_button-icon.png?40|}}

<code javascript>
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

  imports: [
    MatButtonModule,
    MatIconModule
  ],
</code>

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

{{:oktatas:web:angular:angular_material_button-icon-2.png?80|}}

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

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)



===== Vízszintes menü gombokból =====

<code html>
<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>
</code>

{{:oktatas:web:angular:angular_material_menu-from-buttons.png?300|}}

===== Input =====

Az app.component.ts fájlba felvesszük:
<code javascript>
import {MatInputModule} from '@angular/material/input';

  imports: [RouterOutlet,
    MatInputModule
  ],
</code>

A HTML sablonban:

<code html>
<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>
</code>

{{:oktatas:web:angular:angular_material_input-elements.png?200|}}



==== Szelekció és textarea ====

<code javascript>
//...

import { 
  MatInputModule,
  MatFormField
} from '@angular/material/input';

import { MatSelectModule } from '@angular/material/select';

//...
  imports: [
    //...
    MatInputModule,
    MatFormField,
    MatSelectModule
  ]


</code>


<code html>
<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>

</code>

<code css>
: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. */
}
</code>

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


{{:oktatas:web:angular:angular_material_input-select-textarea.png?200|}}



==== Form-filed dokumentáció ====
Hivatalos dokumentáció:
  * https://material.angular.dev/components/form-field/overview (2025)



===== Toggle button =====

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

{{:oktatas:web:angular:angular_material_toggle_button.png?200|}}

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

<code javascript>
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

  imports: [
    //...
    MatSlideToggleModule
  ],
</code>

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

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

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:

<code javascript>
import { FormsModule } from '@angular/forms';

  imports: [
    FormsModule
  ],

//...

export class AppComponent {
  isToggled = true;
}

</code>

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

===== Párbeszédablak =====

<code html src/app/app.component.html>
<button 
mat-raised-button 
(click)="openDialog('1000ms', '400ms')">
Törlés</button>
</code>


<code javascript 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>);
}
</code>

<code css src/app/app.component.css>
button {
  margin-right: 8px;
}
</code>

<code html 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>
</code>

Hivatalos dokumentáció:
  * https://material.angular.dev/components/dialog/overview (2025)

===== Dátum =====

<code javascript 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' },

  ]
};
</code>


<code javascript src/app/app.component.ts>
//...
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';

//...
  imports: [
    MatDatepickerModule,
    MatFormFieldModule
  ],

//...
</code>

<code javascript 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>
</code>

Hivatalos dokumentáció:
  * https://material.angular.dev/components/datepicker/overview (2025)


===== Téma cseréje =====

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.

<code javascript angular.json>
"styles": [
  "@angular/material/prebuilt-themes/cyan-orange.css",
  "src/styles.css"
],

</code>


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.

===== Flex dobozok =====

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:

<code css>
.container {
  margin-inline: 5%;
  padding-inline: 1.5rem;
}

.row {
  display: flex;
  margin-inline: -12px;
}

.col {
  padding-inline: 12px;
  width: 100%;
}
</code>

<code html>
<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>
</code>


===== Link =====

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