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

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

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * 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


A styles.css elejére vegyük fel:
<code css src/styles.css>
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
/* ... */
</code>

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

<code javascript src/app/app.modules.ts>
import {MatButtonModule} from '@angular/material/button';

@NgModule ({
  imports: [
    MatButtonModule,
  ]
})
class AppModule {}
</code>


<code html src/app/app.component.html>
<button mat-raised-button color="primary">Primary</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.module.ts fájlba felvesszük:
<code javascript>
import {MatInputModule} from '@angular/material/input';
</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>


===== A material modulok külön Angular modulba =====

<code>
ng generate module material
</code>


<code javascript 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 { }

</code>

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.

===== Link =====

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