Tartalomjegyzék

< Angular

Angular Material

Telepítés

Telepítés:

ng add @angular/material

A styles.css elejére vegyük fel:

src/styles.css
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
/* ... */

A modul használata

src/app/app.modules.ts
import {MatButtonModule} from '@angular/material/button';
 
@NgModule ({
  imports: [
    MatButtonModule,
  ]
})
class AppModule {}
src/app/app.component.html
<button mat-raised-button color="primary">Primary</button>

Vízszintes menü gombokból

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

Input

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

import {MatInputModule} from '@angular/material/input';
<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>

A material modulok külön Angular modulba

ng generate module material
src/app/material/material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
 
const MaterialComponents = [
  MatButtonModule
];
 
@NgModule({  
  imports: [],
  exports: [MaterialComponents],
})
export class MaterialModule { }

Kivettük a CommonModule-t, egy tömbbe tettük a a MatButtonModule-t, ami bővíthető.

Így ha használni akarjuk Material moduljait nem kell egyenként a használat helyén importálni. Az importálásokat ebben a fájlban fogjuk megtenni.