• 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

Telepítés:

ng add @angular/material

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

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

src/app/app.component.ts

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

src/app/app.component.html

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

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

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

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