[[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

===== Telepítés =====

Telepítés:
  ng add @angular/material


Telepítéskor rákérdez, hogy globálisan szeretnénk használni. 


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

Tegyük fel, hogy az app.component.html fájlba szeretnénk használni.

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

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

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


===== 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>

===== Input =====

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

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


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

===== Link =====

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