Angular: Wstęp do Design Material

Co to jest Angular Material?

Obserwując rozwój aplikacji internetowych można dojść do wniosku, że z biegiem czasu możemy tworzyć coraz bardziej złożone funkcjonalności z mniejszym nakładem pracy. Dzieje się tak dlatego, bo używamy często narzędzi, które ktoś za nas napisał. Można to porównać do budowy domu z klocków. Pozwala to oczywiście na oszczędność czasu i skupieniu się na naszym celu. Angular Material to biblioteka, która pomoże Ci w łatwiejszym budowaniu interfejsu użytkownika.

Używając Material masz na start gotowe komponenty: jak kontrolki do formularzy, przyciski, popupy i wiele więcej.

Instalacja

Zanim zaczniemy instalację zakładam, że masz już postawioną aplikację Angular.

Żeby zacząć używać bibliotekę musimy ją zainstalować. Wejdź do katalogu swojej aplikacji i wywołaj komendę:

ng add @angular/material

Zacznie się proces instalacji. Będziesz pytany przez instalator o: wybranie motywu graficznego, czy ustawić globalnie style odnośnie czcionki(wybierz 'n' to Cię raczej teraz nie interesuje), czy ma być dodana obsługa efektów animacji(zalecam 'y'). To tyle jeśli chcesz poznać więcej szczegółów znajdziesz je pod tym: linkiem.

Pierwsze użycie

Stwórzmy plik o nazwie: material.module.ts o takiej zawartości:

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  exports: [
  	MatInputModule
  ]
})
export class MaterialModule {}

Żeby zacząć używać któryś z komponentów Material trzeba je najpierw zaimportować. W tym przykładzie importujemy komponent do obsługi pól tekstowych.

Drugi krok to dodanie tego modułu do pliku: app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dla uproszczenia tego wpisu zakładam, że działamy na komponencie podstawowym czyli: app.component.ts, app.component.html.

Do pliku: app.component.ts dodaj:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  field = new FormControl();
}

Dobra ostatnia rzecz to po prostu dodanie naszej kontrolki do szablonu. Dodaj taki fragment do szabonu app.component.html:

<div *ngIf="field.value">
  Dzisiaj zjem pizzę: {{ field.value }}
</div>

 <div>
	<mat-form-field>
		<mat-label>Twoja ulubiona pizza?</mat-label>
		<input matInput [formControl]="field" placeholder="Pizza">
	</mat-form-field>
</div>

Krótkie wyjaśnienie:

mat-form-field - to kontener, w którym przechowujemy kontrolkę z biblioteki Material. To pole jest wymagane.

mat-label - Zwykła etykieta. Dodatkowo: w tym przypadku jeśli pole tekstowe nie ma fokusa, to wartość podana w tym tagu jest wyświetlana w kontrolce jako placeholder. Opcjonalne.

matInput - To dyrektywa która informuje, że chcemy skorzystać z modułu: MatInputModule. Tej dyrektywy możemy także użyć dla tagu textarea. To jest wymagane.