Definicja #
Angular Material to oficjalna biblioteka komponentów UI dla frameworka Angular, zgodna z zasadami Material Design Google. Dostarcza zestaw gotowych, dostępnych (accessibility a11y) i testowalnych komponentów UI do budowania spójnych aplikacji Angular.
Angular Material jest częścią projektu Angular prowadzonego przez Google. AngularJS Material to starsza biblioteka dla AngularJS (Angular 1.x) — Angular Material jest jej następcą dla nowoczesnego Angulara (Angular 2+).
Kluczowe komponenty Angular Material:
- Form Controls — MatInput, MatSelect, MatCheckbox, MatRadio, MatSlider, MatDatepicker; integracja z Angular Reactive Forms i FormsModule
- Navigation — MatToolbar, MatSidenav, MatMenu, MatTabs — budowanie głównego layoutu aplikacji
- Layout — MatCard, MatExpansionPanel, MatList, MatStepper, MatDivider
- Buttons & Indicators — MatButton, MatFab, MatIconButton, MatProgressSpinner, MatProgressBar, MatBadge
- Popups & Modals — MatDialog, MatSnackBar, MatTooltip, MatBottomSheet
- Data Table — MatTable z sortowaniem (MatSort), paginacją (MatPaginator) i filtrowaniem
- Icons — MatIcon z biblioteką Material Icons (Google Fonts)
Angular Material jest ściśle zintegrowany z:
- Angular CDK (Component Dev Kit) — nisko-poziomowe primitives (Overlay, DragDrop, Portal, Accessibility, Scrolling) dla custom komponentów
- Angular Animations — animacje Material Design
- Angular Theming — system motywów oparty na SCSS i CSS Custom Properties; tryb jasny/ciemny
Zastosowania #
Angular Material stosuje się do:
- Budowania aplikacji enterprise Angular — panele administracyjne, dashboardy, formularze; spójny design bez projektowania od zera
- Szybkiego prototypowania — gotowe komponenty skracają czas tworzenia MVP
- Aplikacji wymagających dostępności (a11y) — Angular Material spełnia standardy WCAG 2.1; aria-labels, keyboard navigation out-of-the-box
- Theming aplikacji Angular — system motywów SCSS do brandingu (kolory primary, accent, warn)
- Tabel danych z paginacją i sortowaniem — MatTable z MatSort i MatPaginator dla list danych
Ścieżka nauki #
Angular Material jest standardem dla Angular developerów — naturalny wybór przy tworzeniu aplikacji Angular.
Zacznij od:
- Instalacja:
ng add @angular/material— Angular CLI konfiguruje temat, animacje i globalne style - Import modułów: każdy komponent importowany osobno (np.
MatButtonModule,MatInputModule) - Pierwszy formularz z MatFormField, MatInput i MatSelect
- MatTable z sortowaniem i paginacją — najczęściej używany komponent w aplikacjach enterprise
- MatDialog — modalne dialogi potwierdzające akcje
Następnie pogłębiaj:
- Angular CDK — Overlay, DragDrop (drag-and-drop listy), Virtual Scrolling dla dużych list
- Angular Material Theming — customowe palety kolorów, tryb ciemny (
prefers-color-scheme), SCSS mixins - Angular Material 18+ — nowy system tokenów CSS (M3 — Material Design 3)
- Custom komponenty zgodne z CDK: AccessibilityModule (FocusTrap), ARIA
- Alternatywy: PrimeNG, Ng-Zorro (Ant Design), Clarity Design (VMware) — kiedy Angular Material nie wystarczy
FAQ #
- Czym różni się Angular Material od AngularJS Material?
- AngularJS Material to starsza biblioteka przeznaczona dla AngularJS (Angular 1.x), który jest przestarzały i nie rozwijany. Angular Material to jej następca dla nowoczesnego Angulara (Angular 2, 4, ..., 17, 18+) — kompletnie przepisana biblioteka z inną architekturą. Nowe projekty zawsze używają Angular Material (nie AngularJS Material).
- Czy muszę importować każdy moduł Angular Material osobno?
- Do Angular 14 tak — każdy komponent (MatButtonModule, MatInputModule) musiał być importowany osobno. Od Angular 15+ z standalone components import jest bezpośredni (MatButton, MatInput jako standalone). Angular CLI (ng add @angular/material) konfiguruje podstawowe importy automatycznie.
- Czym jest Angular CDK?
- Angular CDK (Component Development Kit) to nisko-poziomowa warstwa Angular Material, dostarczająca primitive'y do budowania własnych komponentów UI: Overlay (portale, popupy), DragDrop (drag-and-drop), Virtual Scrolling (wydajne listy), Accessibility (FocusTrap, Live Announcer). CDK można używać niezależnie od Angular Material — do tworzenia własnych design systemów.
- Ile zarabia Angular Developer znający Angular Material?
- Angular Material to standardowa umiejętność Angular Developera — wymagana w większości projektów enterprise Angular. Angular Developer (mid) zarabia w Polsce od 10 000 do 20 000 zł brutto, senior od 18 000 do 30 000 zł. Sama znajomość biblioteki nie wyróżnia kandydata, ale jej brak jest mankamentem w rozmowach rekrutacyjnych.