Angular: Dynamiczna tabela z danymi

Angular 6, 7, 8+

0:01Witaj w kolejnej lekcji tym razem spróbujemy zbudować sobie

0:05taką tabelę w stylu material design która będzie dynamiczna

0:09czyli będziemy mogli sterować tym jak wyglądają poszczególne komórki kolumny

0:13nagłówki oraz będziemy mogli podłączyć różne źródła danych czyli

0:18manipulować tutaj zawartością tej tabeli tak danymi które pojawiają

0:22się nam w takiej tabeli teraz żeby taką tabelkę tutaj użyć

0:26możemy użyć po prostu właśnie takich specjalnych dyrektyw tej

0:30tabeli ja to zrobię tutaj w specjalnym tym takim komponencie tasks

0:34które stworzyłem wcześniej tutaj tez stworzyłem sobie serwis

0:38z przykładowymi danymi tasks data service gdzie

0:42będziemy mogli zrobić query taska pofiltrować posortować sobie te

0:47dane i to idzie nam zwracało tutaj observable czyli nie będzie to działało wyglądało

0:51w taki sposób jakby te dane faktycznie były pobierane z prawdziwego serwera czyli

0:56tak po pierwsze do app module trzeba dodać odpowiednie tutaj do material

1:00module dodać odpowiednie moduły czyli dodam sobie mat table

1:06module tutaj można także od razu dodać sobie

1:10mat paginator module oraz

1:14mat sort module z których skorzystamy

1:18później okej teraz wracając do komponentu jeśli chciałbym tutaj

1:22wyrenderować taką tabelę to po prostu zacząć od zwykłej tabelki takiej

1:27html tutaj do tego musimy dodać oczywiście mat table i

1:33podamy tutaj źródło danych i teraz źródło danych po prostu

1:37data source data source w ten sposób mogło być nawet

1:41prostą tablicą i zaczniemy może od tego że ten data source na początku no

1:46zrobimy żeby to była po prostu jakaś prosta tablica

1:51w którą umieszczę jeden element będzie miał on id może title

1:55i completed true

2:03czyli jakieś takie przykładowe jedno zadanie i teraz aby wyświetlić

2:07elementy tego data source czyli naszego źródła

2:12danych w przypadku prostej listy nie musimy tu robić ng for

2:16nie musimy ręcznie tworzyć wierszy kolumn wystarczy zdefiniować poszczególne

2:21szablony dla elementów tej tabeli czyli stworzę sobie

2:25ng container ng container

2:30tutaj stworzę szablon template jednej komórki czyli

2:34tak td jest to jedna komórka i teraz tu używając gwiazdki

2:38zamieniam to na template i mogę powiedzieć że jest

2:43to mat cell def czyli definicja

2:47jednej komórki i tutaj mogę przypisać sobie do zmiennej jakiej chcę

2:51na przykład row zawartość właśnie jednego wiersza i

2:55w każdej kolumnie mogę odnieść do tego wiersza i wyciągnąć ten element który potrzebuję na przykład

2:59id i wtedy to nazwiemy sobie że jest to

3:03mat column definition definicja kolumny jeśli kolumna

3:08jest to kolumna id i w ten sposób możemy postąpić dla kolejnych

3:12elementów czyli gdybym chciał tu jeszcze dodać powiedzmy

3:16name to analogicznie nazywam kolumnę name no i mogę

3:20wyciągnąć sobie na przykład z tego elementu name albo title tak

3:24może być to title nie musi się to zgadzać ja zrobię w ten sposób żeby było

3:29prościej i to nie wszystko to nam jeszcze nie wyrenderuje tej naszej tabeli

3:33trzeba zrobić tak że tutaj definicję wiersza tr

3:37i teraz po co to wszystko w ten sposób możemy korzystać z różnych tagów

3:41to nie musi być tabela możemy użyć tutaj dowolnej struktury html dowolnych css'ów

3:46tylko że oznaczyć poszczególne jakby elementy które

3:50reprezentują którą część tabeli to musi być tabela to może być właśnie dowolna html jest to duża

3:54dowolność jeśli chodzi o wiersz tutaj

3:59w dokumentacji mamy szablon wiersza musi być

4:03to dyrektywa mat row i tutaj

4:07także mamy gwiazdkę czyli ten tr

4:11tutaj to nie będzie element tylko będziesz szablon tak gwiazdka oznacza że to jest to

4:15template który będzie mógł go

4:19duplikować wielokrotnie i tu mogę powiedzieć sobie że

4:23aktywne kolumny że aktywne

4:28kolumny no to na przykład właśnie jest id i title tak

4:32i on użyje tych nazw które tu pytaliśmy żeby wiedzieć które z tych szablonów wyrenderować

4:36jako kolumny komórki w tym wierszu naszej

4:40tabeli jeszcze coś jest nie tak mat cell

4:45mat row

4:50i on tu konieczne upiera się żeby zrobić nagłówek okej

4:54nie ma problemu możemy także tutaj definiując kolumny

4:58zdefiniować nie tylko komórkę ale możemy także definiować nagłówek

5:02czyli mat header cell mat

5:07header cell def tutaj

5:13nie mamy pojedynczego wiersza bo jest to wiersz nagłówka więc możemy dynamicznie tutaj

5:17określić wartości bo zawsze to będzie to tylko jeden nagłówek mogę powiedzieć tutaj po prostu tutaj na sztywno

5:21że jest to id no i analogicznie tutaj powiedzieć że jest title

5:26no i w ten sposób też możemy zrobić tutaj

5:30wiersz nagłówka czyli mat header row mat

5:35header row def tutaj

5:40tego już nie ma tu będą już tylko kolumny same możemy określić nic

5:45więcej zobaczmy mat header cell header row def tutaj

5:50już tylko tak z same kolumny

5:55przekazujemy okej jak usunę nagłówki to mogę tu zmienić na th

5:59tak tutaj był header czyli jak widzisz

6:04definiujemy tylko poszczególne szablony poszczególnych elementów czy

6:09to zadziała kompiluje

6:13się okej dobra

6:19coś tu jeszcze jest nie tak jak widzisz nagłówki się wyrenderowały coś tu jest

6:23nie tak z wierszami o tak oczywiście nie zamknąłem klamer okej

6:29ta tabela jest jeszcze wąska więc od razu pozwolę sobie tutaj dodać jakiś

6:33styl powinienem to zrobić i osobno ale tak na szybko

6:37wtedy szerokość tej tabeli żeby nam wypełniła całą

6:42szerokość tego ekranu no i mam tutaj tabelę która

6:46tutaj wyświetla nagłówki i wyświetla treść zwróć uwagę że tutaj

6:50strukturę tej tabeli jest zupełnie dynamiczna czyli możemy dynamicznie określić jaka

6:55jest struktura tych nagłówków czyli na przykład active columns to

7:00może być tutaj także zmienna skonfigurowana tu czyli mogę ustawićsobie jakie

7:05są aktywne kolumny i teraz

7:10zmieniając zawartość tej active columns możemy zmienić strukturę tabeli

7:14możemy włączyć wyłączyć pokazać schować różne kolumny możemy

7:18też zamienić kolejnością na przykład te elementy okej to za chwilkę ja tu

7:23spróbuję zobaczyć sobie czy w komponentach material design jak

7:27pamiętasz mieliśmy tutaj taką opcję

7:31menu rozwijanego no właśnie tego typu i

7:36co moglibyśmy zrobić bo mógłbym zrobić coś takiego żeby

7:40tutaj ten nagłówek powiedzmy aktywne kolumny mógłbym

7:45także zrobić na przykład osobno nagłówki

7:51header i wykorzystać

7:56active columns i dodać do tego jeszcze jakąś specjalną kolumnę na

8:01przykład menu i tu moglibyśmy

8:05zdefiniować jeszcze jeden specjalny taki element nazwać

8:11go menu spróbujemy bez definicji jednej

8:15komórki zobaczymy czy nie będzie krzyczał na mnie i tutaj zrobić sobie właśnie

8:20przycisk taki z rozwijanym menu czyli mat menu tutaj

8:24z przyciskiem coś takiego co już robiliśmy i zobaczyć

8:28czy uda mi się taką opcję menu tutaj umieścić w jednej z komórek

8:38niech to się nam przekompiluje zobaczymy pojawiło się menu

8:42settings i tak dalej tutaj jego szerokość

8:46nie podoba się no i nie podoba mi się że nie ma komórki więc trzebaby komórkę

8:51też definiować nawet jeśli takowa po prostu nie będzie używana tak czyli

8:55tutaj musimy zdefiniować tak że szablon dla komórki nawet jak

8:59nie chcemy tych elementów wyświetlać no nawet w razie gdyby ktoś chciał kiedyś jednak

9:03tam komórkę z menu wyświetlić

9:07co jest ciekawe tutaj możemy umieścić na przykład także style czyli jest to definicja czy

9:12mogę powiedzieć tutaj że style że ta kolumna powinna być bardzo wąska to

9:16ona powinna mieć powiedzmy nie wiem 25 pikseli także aby ona nie była

9:21taka szeroka czyli mamy bardzo fajne możliwości stylowania poszczególnych

9:25komórek poszczególnych wierszy więc

9:29tutaj mógłbym sobie ustawić jakie kolumny mamy dostępne filtrowanie i sortowanie tego

9:34typu rzeczy nawet przy każdej kolumnie takie menu dodać też mamy

9:38bardzo duże możliwości stylowania okej czyli tutaj to sobie

9:42zostawię tutaj gdzieś pamiętasz była taka możliwość właśnie

9:47zagnieżdżonego menu a bo tak że na przykład menu z

9:52jakimiś tam właśnie opcjami przyciskami tego

9:56typu rzeczy ale to sobie zostawimy wrócę do tabeli co

10:00z tym źródłem danych tutaj mamy cały czas ten jeden rezultat co

10:05możemy zrobić zamiast tego źródło danych może być takim specjalnym obiektem

10:09który pozwoli nam dynamicznie podłączyć się do właśnie

10:14jakiegoś źródła danych ja tu zrobię to w tym miejscu trochę nieelegancko powiedzmy

10:20tasks data source

10:25i zrobimy żeby to rozszerzało obiekt data

10:29source który pobierzemy sobie z angular cdk table

10:35zobaczymy i tu powiemy że to ma zawierać

10:39obiekty typu task tak

10:44zrobić kolekcje obiektów typu tasks okej

10:49tasks data source okej

10:53musimy zaimplementować dwie metody metodę connect i disconnect zobaczymy czy

10:57to uda się automatycznie zaimplementować

11:03okej on tu chce jedno zobaczymy się uda wszystkie od

11:07razu żarówka prawie

11:13dobra czyli mamy metodę connect która przyjmuje

11:18collection viewer i powinna zwracać observable który zawiera właśnie

11:23nasze taski tutaj to jest jeden task kolekcje

11:28tasków to jest jedna metoda

11:32druga metoda to jest disconnect coś

11:37to mu jeszcze nie pasuje dodaj

11:42importy okej i tutaj

11:46też dostajemy collection viewer i tu już nic musimy zwracać

11:50z void tu jest disconnect czyli jak widzisz zamiast pustej tablicy możemy ućyć specjalne metody specjalnej

11:54klasy która ma metody podłącz i rozłącz ja

11:59właściwie taką klasę mogę tu próbować wstrzyknąć

12:03ale to może za chwilkę bo wziąłem potrzebne jeszcze dodam sobie konstruktor do

12:09którego będziemy potrzebowali ten cały tasks service

12:14najlepiej przekazać w ten sposób i wtedy tutaj jak

12:18ktoś chce się podłączyć no

12:22właśnie no to możemy od razu w nim jeszcze pobierzemy coś z serwera

12:26podłączyć sobie jakieś powiedzmy prywatne data

12:31będzie to new behavior subject i będzie to pusta

12:35tablica na początek i powiedzmy tutaj zwrócimy return

12:40this data as observable żeby

12:44któś mógł się podpiąć ale jednocześnie zwracamy to tu danych i jednocześnie możemy

12:48to tu wykonać zapytanie na przykład do serwera tutaj

12:53jeszcze potrzebny jest super super nie wymaga żadnych tych czyli

12:58rodzic nie wymaga żadnych parametrów i teraz zwracamy

13:02to ale jednocześnie próbujemy połączyć się do tasks service

13:06i wyszukać tutaj

13:10jakieś zadania jak dostaniemy odpowiedź

13:14to odpowiedź możemy

13:18przekazać sobie do this data

13:24next czyli jak widzisz

13:28nie musimy podpinać bezpośrednio usługi zapytań do serwera

13:32czyli możemy zrobić takiego pośrednika który pozwoli nam kontrolować w jakiś sposób

13:36te dane są wysyłane pobierane dodatkowo

13:40collection viewer tu jest bardzo ciekawa rzecz bo collection viewwer view change

13:45jest to observable który będzie

13:49zawierał takie informacje jak list range co to jest

13:53zobaczmy jak się zasubskrybujemy na to na razie console log zobaczymy

13:59jaki będzie efekt jak tego użyjemyja ten na razie tasks source po prostu tutaj stworzę

14:03ręcznie czyli powiedzmy new tasks source

14:07tasks service i

14:12nasze źródło danych które było zwykłą tablicą zamienię tutaj na ten

14:18nasz tasks data source tutaj się typy nie zgadzają więc na chwilkę

14:22tutaj typy pominiemy zobaczymy co się stanie czyli

14:26tutaj task service podłączam do źródła danych źródło danych wystawiam i nasza tabela

14:31powinna się podpiąć tutaj do tego źródła danych wykonać metodę connect

14:35i jak widzisz mamy tutaj pobrane 10 różnych

14:40tu jest zapytań ale dodatkowo tutaj bardzo fajna rzecz dostajemy start

14:44i end początek koniec tabeli i tutaj bardzo fajnie bo mamy możliwość paginacji

14:49przewijania tak czyli jakby źródło dostaniemy informację odkąd dokąd od

14:53start do end ile rekordów chce pobrać no i my wtedy możemy odpowiednio zareagować

14:57czyli innym słowem możemy przekazać do tego źródła parametry

15:02opcje ustawienia naszego zapytania ustawienia nawet tabeli i

15:07to źródło danych jak pobierze dane to poinformuje tabelę czyli ta tabela będzie

15:11reagowała nie trzeba jej mówić tej tabeli co trzeba zrobić ona cały czas jest podpięta

15:15podłączone do tego źródła no i przekazując parametry różne opcje metody właśnie

15:20na tym źródle można tym bezprzewodowo sterować tabelą takie

15:24rzeczy jak na przykład filtrowanie sortowanie paginacja to wszystko właśnie może obsługiwać

15:28tak żeby tabela się tym już nie musiała przejmować no ale

15:32o tym wszystkim już kolejnych lekcjach tak więc do zobaczenia