Angular Material

• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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";
/* ... */

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>

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

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.

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