Integrazione dei Componenti Material in una applicazione Angular

In questo articolo vedremo come usare i componenti di Angular Material in una applicazione Angular già esistente.

La prima operazione da fare è installare il pacchetto @angular/material tramite CLI usando il comando ng add, quindi

ng add @angular/material

in alcuni casi questo comando da solo non funziona, quindi in caso di errori lanciare i seguenti comandi da CLI

npm install --save @angular/material @angular/cdk
ng add @angular/material

se tutto va a buon fine visualizzeremo i seguenti messaggi nella CLI

$ ng add @angular/material
Skipping installation: Package already installed
UPDATE package.json (1137 bytes)
- Installing packages (npm)...
√ Packages installed successfully.
UPDATE src/app/app.module.ts (423 bytes)
UPDATE angular.json (3215 bytes)
UPDATE src/index.html (553 bytes)
UPDATE src/styles.css (181 bytes)

cioè che sono stati modificati i file app.module.ts, angular.json, index.html e style.css, in particolare vengono apportate le seguenti modifiche

• Importazione BrowserAnimationsModule in app.module.ts;
• Aggiunta stile css a livello globale in angular.json, di default viene usato il tema indigo-pink.css, è possibile usare altri temi come indicato in questa pagina;
• Aggiunta del font Roboto e Material Icons a index.html;
• Aggiunta stili al file css globale style.css.

A questo punto possiamo iniziare a usare i componeti Material nel nostro progetto Angular, procederemo nel seguente modo:

1. Creazione modulo dove importare i componenti Material;
2. Importare il modulo creato in app.module.ts;
3. Creare in componente .ts per ogni componente Material che verrà utilizzato.

Per creare un modulo si usa il comando ng generate

ng generate module material

in questo caso il modulo si chiamerà material e sarà simile a questo

material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class MaterialModule { }

come esempio supponiamo di voler utilizzare i bottoni, questa è la pagina della documentazione

material.angular.io/components/button/overview

quindi importiamo nel modulo material che abbiamo creato in precedenza il componente MatButtonModule

material.module.ts

.........

import { MatButtonModule } from '@angular/material/button';

.........

@NgModule({

  .........

  exports: [
     MatButtonModule
  ]
})

importiamo il modulo material in app.module.ts

app.module.ts

.........

import { MaterialModule } from './material/material.module';

@NgModule({

  .........

  imports: [
    .........

	MaterialModule
  ],
    .........
})
export class AppModule { }

ora creiamo un componente button-material

ng generate component button-material

modifichiamo il file button-material.component.html in modo che visualizzi un bottone

button-material.component.html

<button type="button" mat-raised-button color="primary">
Basic button
</button>

aggiungiamo ad app.component.html il selettore del bottone

app.component.html

<app-button-material></app-button-material>

il risultato è il seguente

stesso procedimento per utilizzare altri componenti Material.

• Code on Stackblitz
• View Demo