Angular: Przykład praktyczny - Kontakty

Angular 6, 7, 8+

0:00W tej lekcji wykorzystamy wszystko co dowiedzieliśmy się o listach

0:04przyciskach ikonach i tak dalej żeby zbudować taki przykład

0:08na przykład listy kontaktów i tutaj wygenerowałem dodatkowy komponent

0:13jest to nie strona tylko komponent czyli znajduje się tutaj także w katalogu components

0:17jest to contact selection list czyli lista która słuzyła do wyświetlania

0:22przeglądania i wyboru kontaktu który chcemy którego szczegóły

0:26chcemy wyświetlić i oczywiście przekazuje tutaj nasze kontakty ma on tutaj

0:31input który będzie zawierał właśnie te dane kontaktów

0:35jeśli chodzi o html to na razie tutaj za wiele nie ma czyli

0:39tutaj w tym komponencie contact selection list możemy tak jak poprzednio zrobić sobie mat list

0:44który zawiera mat list item w ten

0:49sposób będziemy powtarzać te elementy tyle ile mamy kontaktów czyli let

0:54contact of contacts w

0:58ten sposób i tu na razie powiedzmy wyświetlę div

1:03mat line czyli standardowo i tu będzie nasz kontakt

1:07powiedzmy name tutaj

1:12nie mat tylko będzie to div oczywiście

1:17tu błąd okej

1:21zobaczymy jak to wygląda i mamy po prostu tutaj listę

1:26kontaktów nie wiem czy zwrócić uwagę że ten element zmieniłem ikona contact

1:31to lepiej wyglądało i ten tutaj nagłówek ma coś takiego

1:35jak mat display jeden jeśli chcesz takie właśnie duże eleganckie nagłówki

1:39to możesz skorzystać właśnie z tych elementów mat display

1:44i od jeden do cztery można je coraz większe robić zależy od tego co

1:48potrzebujemy tutaj jest bardzo fajne taki duży hipsterski

1:52nagłówek co czasami się przydaje jeśli chcesz bardzo takie nietypowe eleganckie

1:57layouty zbudować ja dostanę taki delikatny

2:01display 1 pod spodem lista naszych kontaktów na razie bez

2:06żadnych dodatków tutaj jak pamiętasz te elementy one

2:10zawierały jeszcze obrazek czyli jeśli przejdziemy do selection list

2:14i ja spróbuję tutaj powiedzmy przed mat line

2:18dodać image obrazek i

2:23tu do source przekazujemy ścieżkę do naszego obrazka

2:27czyli foto i jako opis damy

2:33po prostu nazwy kontaktu contact name i

2:37jeśli teraz spojrzymy tutaj te obrazki nam się tu nie za bardzo załadowały

2:42jeszcze spojrzę co jest nie tak null czyli nie tak

2:46nie phone chcemy tylko jeszcze raz photo

2:51też na p zobaczmy teraz i no

2:56nie do końca o to nam chodziło tak te obrazki no zajmują za dużo miejsca no

3:00i oczywiście są z prawej strony bo treść dodatkowa nie jest to

3:04treść główna jeśli chcielibyśmy te ikonki po lewej stronie

3:08no to właśnie nie są to ikonki tyle

3:13co avatary avatary dla każdego

3:17elementu listy nawet jeśli to nie są osoby czyli tutaj dla tego elementu

3:21zamiast mat list icon tak już poprzednio to

3:25używamy mat list avatar który sprawi że ta ikona

3:29po prostu stanie się avatarem tego elementu czyli pojawi się tu jako takie okrągłe

3:33kółko oczywiście dla każdego elementu możemy dodać troszkę więcej informacji na

3:37przykład mogę tu umieścić jeszcze powiedzmy position możemy mat divider

3:42dodać możemy tą listę znacznie rozbudować oczywiście każdy

3:46tutaj element może mieć po prawej stronie jeszcze jakieś kolumny ikonki

3:50i tak jak robiliśmy to wcześniej i teraz tak jeśli chcemy ten wygląd troszkę

3:54zmienić to możemy oczywiście tutaj dodać dodatkowe style czyli powiedzmy jak

3:58mamy ten image i chcę dodać jakiś styl to nie mogę po prostu nadpisać

4:03tego stylu który tutaj jest bo jak padam width 100 pikseli jak widzisz nic

4:07się nie dzieje dlatego że te style angularowe angular material

4:11są ważniejsze i też nie polecam ich modyfikować w ten sposób bo zmienimy

4:15w innym miejscu będziemy chcieli w innym i tak dalej polecam stworzyć do tego osobną

4:19klasę czyli jeśli ja tutaj żeby w tym samym miejscu style

4:23sobie zrobię na razie tutaj i

4:28napiszę to w ten sposób że obrazek który ma jednocześnie

4:32styl mat list avatar tutaj angular

4:36sam dodaje taką klasę jak widzisz tutaj jeśli dodamy atrybut mat list avatar tutaj

4:41angular dodaje swoje style dodając odpowiem klasę mat list avatar i

4:45oprócz tego na przykład doda mi jeszcze naszą klasę nie zacznę jej od słówka mat

4:49bo te są zarezerwowane dla materiala więc podam po prostu list

4:53avatar i powiedzmy że nie chcemy żeby to było kwadratowe

4:58czyli chcemy prostokątny no to ustawiamy mu szerokość

5:02na przykład 56

5:06bardziej kwadratowy spróbujemy żeby to było w ten sposób

5:10i dodam odpowiednią klasę do tego naszego obrazka

5:17i zobaczmy tutaj

5:21coś nie zadziałało oczywiście nie podałam jednostek pikseli pikseli

5:27i zobaczmy teraz one się tu powiększyły jak widzisz i

5:31teraz co możemy zrobić jeśli ja wysokość tutaj zmienię o możemy sobie ostylować

5:36jak chcemy żeby obrazek lepiej pasował mamy coś takiego jeszcze jak object fit

5:40możemy też dobrać w jaki sposób chcemy je przyciąć jeśli się nie mieszczą cover

5:45wygląda dobrze i powiedzmy w ten sposób może

5:51border radio sobie ustawimy

5:55na 0 może

6:00w ten sposób tak mamy takie prostokątne wtedy avatary czyli pamiętaj

6:04jeśli chcesz napisać któryś ze styli no to trzeba dodać dodatkowo oprócz istniejących

6:08klas trzeba dodać własną klasę do tego

6:13elementu którego styl chcemy zmienić czyli mamy te kwadratowe tutaj prostokątne

6:17avatary i jest tutaj jeszcze jeden

6:21przycisk i powiedzmy że chcielibyśmy faktycznie mieć możliwość wybierania tych elementów

6:25i jak najbardziej możemy tutaj zrobić button mat icon button

6:36mat icon standardowo nic nowego i

6:40powiedzmy że chcemy ten przycisk w prawą stronę czy

6:47jest tu gdzieś przycisk w prawą stronę mamy jasność o chevron

6:52right chevron left mamy całą sekcję navigation elegancko

6:56mamy strzałki i mamy tutaj taki chevron spróbuję

7:00użyć tego chevron zobaczmy

7:09jak to będzie wyglądało i mamy tutaj przyciski jeśli

7:14chcesz jednak żeby cały element listy jakby był przyciskiem żeby był klikalny

7:18to możemy robić to inaczej możemy zamiast tutaj tutaj

7:23zamiast przycisku możemy zrobić żeby cały element listy był

7:27przyciskiem wtedy jednak trzeba

7:31tu dodać atrybut mat list item i spójrz w dokumentację

7:35tu jest sekcja action list czyli po prostu zamiast zwykłej listy

7:39mamy listę akcji i zamiast elementów mamy przyciski ale przycisk zwróć uwagę musi być

7:43jako list item oznaczone czyli zamieniamy mat list na mat

7:49action list i mat list item

7:53zamieniamy na butom aczkolwiek button ten musi

7:59mieć odpowiedni atrybut mat list item jeśli

8:05teraz zapiszę plik zobaczymy jak wygląda nasz przykład jak widzisz

8:09tutaj te elementy teraz tutaj się podświetlają mogę

8:14je kliknąć czyli każdy z nich stał się teraz przyciskiem

8:18i ta ikonka tutaj jest tylko informacyjna cały element jest

8:22przyciskiem i możemy też nasłuchiwać na przykład akcji czyli mogę zrobić sobie tutaj click select

8:28i na przykład contact który właśnie tutaj mamy wyświetlony

8:33chcemy przekazać do na przykład jakiejś tam funkcji select ja sobie tutaj szybko zdefiniuje

8:37czyli funkcja select jeśli

8:41ktoś kliknie contact to ten contact możemy przez output przekazać

8:46na zewnątrz tak czyli powiedzmy selection change new

8:51event emitter z angular core i

8:56cały kontakt możemy wyemitować czyli this selection

9:00change emit i nasz kontakt który właśnie

9:05kliknęliśmy okej

9:10select i teraz komponent który używa tej

9:14naszej listy tutaj można nasłuchiwać takiego zdarzenia jak selection

9:18change i tu powiedzmy na szybko zrobię sobie selected to

9:23się równa event czyli na szybko sobie wybiorę zaznaczony element i tutaj

9:27pamiętasz nasz details list mogliśmy przekazywać mu zaznaczony element więc

9:32przekażę tutaj nasz selected i jeśli ten jeśli

9:37mamy selected tylko wtedy będziemy go wyświetlali

9:41spróbujmy w ten sposób tutaj możemy zdefiniować to jeszcze w komponencie

9:45ten selected czyli selected ustawię tutaj

9:49contact okej i

9:53nasz rodzic którego nie zapisałem oczywiście powinien to wyświetlić tu

9:58sobie jeszcze jedną rzecz mianowicie te wszystkie elementy tutaj te oba

10:02umieszczę tutaj w elemencie powiedzmy row wiersz

10:06i nasz element row damy

10:10mu flex display flex żeby elementy

10:15układały się tutaj w wierszu i każdemu z tych elementów damy

10:19jeszcze klasę czyli powiedzmy tutaj tutaj kolumna

10:25czyli damy im też po jakiś flex

10:29powiedzmy jeden żeby zajęły po równo miejsce okej

10:34zobaczymy jak to się zachowa klikamy element

10:38widzę jego szczegóły tutaj nie mniej przydałoby się

10:42dodać jeszcze jakiś odstęp nie ma problemu nasz mat divider może

10:48działać także w trybie pionowym

10:52wystarczy dodać opcję vertical true i powinniśmy zobaczyć tutaj odstęp

10:56pionowy czyli tu jest kreska mamy odstęp

11:01przydałby się jeszcze jakieś marginesy więc tu tylko mała

11:05modyfikacja dodam jeszcze tutaj na razie na sztywno

11:09styl powiedzmy że margines albo padding wielokrotność

11:16ośmiu więc zrobimy 16 pikseli i oczywiście mamy kilka elementów które

11:20chcielibyśmy pokazywać chować możemy jest zgrupować w ng container

11:26na kontenerze ustawić warunek selected

11:31lub nie selected i te elementy w

11:35środku ukryć jeśli nie mamy zaznaczonego zadnego kontaktu

11:41czyli teraz jeśli klikam kontakt no to tu się pojawiają jego szczegóły

11:45i jeśli zmieniam kontakt te szczegóły się zmieniają oczywiście one nie są ładowane

11:49z serwera żeby ładować je z serwera trzeba by było dodać tutaj no

11:53faktycznie połączenie z serwerem i tu się gdzieś zasubskrybować żeby te dane

11:57były pobierane po prostu asynchronicznie tym się na razie nie zajmujemy się wyłącznie interfejsem

12:03i ten interfejs jak widzisz można sobie bardzo fajnie składać z

12:07poszczególnych list ikon elementów i tak dalej no

12:12właśnie zobaczymy jakie jeszcze możliwości layoutu układu są

12:16dostępne w material design ale to już w kolejnych lekcjach tak więc do zobaczenia