W procesie tworzenia aplikacji Angular często na samym początku należy obrać drogę co do wizualnego motywu przewodniego. Możliwości jest naprawdę wiele, co jest niewątpliwą zaletą tej popularnej biblioteki. Jednym z najczęstszych wyborów jest użycie „Angular Material”, czyli implementacji Material Design dla Angulara. Po wpisaniu w wyszukiwarce kilku fraz bez problemu można dostać się na stronę https://material.angular.io/, która zawiera kompletną dokumentację dla komponentów stworzonych zgodnie z Material Design.
Instalacja Angular Material
Pierwszym i w zasadzie jedynym krokiem jaki należy zrobić, aby móc zacząć korzystać z Angular Material jest wpisanie w Angular CLI powyższego polecenia. Wykonanie tej czynności sprawi, że automatycznie zainstalują się potrzebne elementy.
Input
Kontrolka typu „Input”
Na początek warto pokazać jak wygląda kontrolka typu „Input”, która znajdzie dla siebie miejsce w większości aplikacji.
Implementacja kontrolki typu „Input”
Wewnątrz tagu <mat-form-field>, który pełni rolę łącznika znajduje się element <mat-label> oraz <input>. Pierwszy z nich odpowiada za etykietę, a drugi jest polem, do którego można wprowadzić tekst. Istotny jest tutaj element „matInput”, który sprawia, że cała kontrolka nabywa zupełnie nowego wyglądu i działania.
Bardziej rozbudowana wersja kontrolki „Input”
Kontrolka Input może zostać rozbudowana o dodatkowe elementy jak np. ograniczenie maksymalnej długości czy dodanie wskazówki.
Implementacja bardziej rozbudowanej wersji kontrolki „Input”
Przykładowo, aby uzyskać kontrolkę do wpisywania numeru PESEL, można stworzyć konstrukcję widoczną powyżej. Dodany został chociażby typ „number”, który nie pozwala na wpisywanie liter czy wskazówkę, której wartość prezentuje ile aktualnie znaków wpisanych jest w polu Input.
Table
Dla prezentowania dużej ilości danych warto skorzystać z komponentu „Table”.
Kontrolka typu „Table”
Przykładowo mając listę osób można je wyświetlić w taki sposób, jak zostało to zaprezentowane powyżej.
Kontrolka typu „Table”
Praktycznie z pudełka, z dosyć małym nakładem pracy, można uzyskać bardzo dobry efekt. Gdyby zrobić tą samą implementację przy użyciu czystego HTML ilość kodu mogłaby znacznie wzrosnąć. To czym głównie należy się zająć w przypadku tabeli tworzonej przy użyciu Angular Material to definicja poszczególnych kolumn: nagłówek, elementy i stopka. W kolumnach można umieścić nie tylko statyczny tekst, ale także chociażby wspomnianą wcześniej kontrolkę typu „Input”.
Źródło danych dla kontrolki typu „Table”
Źródłem danych dla tej kontrolki może być wiele obiektów. Dane mogą być wprowadzone na stałe wewnątrz aplikacji (jak na powyższym zrzucie), jednak znacznie częściej dane te będą spływać z zewnętrznego źródła jak np. baza danych SQL.
Podsumowanie
Te i inne przykłady, które można znaleźć na oficjalnej stronie Angular Material, potrafią całkowicie odmienić nie tylko wizualne, ale także techniczne oblicze wielu aplikacji internetowych. Dlatego przy projektowaniu nowego systemu warto zastanowić się nad skorzystaniem z tych komponentów, które dzięki swej popularności potrafią znacznie przyspieszyć implementację.
