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

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
• warn: Figyelmeztető színséma

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

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

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