Angular: Dynamiczne własności i atrybuty

Angular 10+

0:00Wiemy już jak tworzyć własne komponenty i

0:02wiemy jak z tych komponentów dynamicznie wędrować dowolne dane w postaci tekstu.

0:08Co jednak kiedy chcielibyśmy właśnie tutaj

0:10dynamicznie wyświetlić nie tylko tekst ale jakąś strukturę HTML.

0:16Jak pamiętasz wydaje się że HTML a to agora na to nie pozwoli.

0:20On taki HTML nam usunie z pisma HTML a dodać to nie wprowadzamy

0:25jako tekst tylko potrzeba do tego specjalnych znaczników w HTML.

0:30Teraz nim to zrobimy.

0:31Jeśli były jakieś elementy HTML czyli PDF

0:35który będzie miał jakiś test powiedzmy jakiś tytuł

0:41tylko jakieś różnych atrybutów przykładowych w ten sposób.

0:50OK. Czy ktoś zabierze jakiś jeszcze element

0:52czyli tworzy jakiś przykładowy HTML który jak widzisz ma różnego rodzaju atrybuty.

1:01Powiedz w ten sposób i oczywiście Muller to zero jako zwykły element HTML.

1:06Czyli mamy nasz GIF nasz GIF zawiera w środku jak go rozwija

1:10import i te elementy tu są i teraz tak tego ten GIF.

1:14Wiesz to w krypcie mogę go dostać poprzez IDE test telefon idę.

1:20To powstaje globalna zmienna jest też troszeczkę inaczej.

1:24Tutaj mam zaznaczone te elementy pismem

1:26prawym i z badań tutaj są zaznaczone to mam bo dostępne w zmiennej dolar 0 tutaj w

1:31konsoli tylko i sobie zbadać jego atrybuty.

1:36I teraz cos ciekawego że mógł tych

1:38atrybutów dostać się poprzez API czyli mianowicie bezpośrednio mogę np.

1:43odczytać sobie powiedzmy ile

1:45mogę bezpośrednio odczytać tytułu ale nie każdy atrybut jest wzmiankowany.

1:52Nie każdy ma swój odpowiednik w tym obiekcie tak jak

1:56w środę to jest masa różnych elementów czyli wszystkie właściwe własności

2:01ale nie wszystkie atrybuty znajdują się tutaj w tych opcjach to właściwościach.

2:05Co jeszcze. Idę spróbujmy.

2:07Data test.

2:09To już nie zadziałało bo to jest podejmowanie w krypcie tak samo roli.

2:13Też tutaj nie dostaniemy.

2:15Nie ma takiej możliwości trzeba byłoby to zrobić poprzez gest atrybut.

2:23Rolę możemy pobrać sobie rolę i tak chcemy ustawić zmienić pewne własności tak

2:30aby zmienić nie ma problemu mogę idę zmienić na inne.

2:34Jak widzisz się zmienia. Możemy też zmienić sobie i itd.

2:41Możemy je modyfikować jeśli nie zrobię żadnych błędów oczywiście.

2:50W ten sposób te pozostałe jako atrybut zmodyfikować.

2:54Co ciekawe że np. mogę zrobić to w dwie strony.

2:57Czy chciałbym ukryć ten element.

2:58To mogę zrobić albo tak idę co jak zobaczysz doda mi atrybut Hidden.

3:06Mógł liczyć na forsę.

3:11Fox atrybut znika czyli możemy po prostu

3:17poprzez te własności modyfikować sobie obiekty atrybutów niektórych nie dostać

3:23się w ten sposób trzeba wykorzystać funkcję po prostu atrybut lub ręcznie np.

3:28w ten sposób SED atrybut.

3:36Tak w ten sposób go ustawić w ten sposób

3:39jeśli nie ma odpowiednika jeśli jest to odpowiednik dziś możemy

3:43dostać się do domu to jest to bardzo wygodny sposób zebrać dużo mniej pisania

3:46jest też szybszy sposób nie trzeba dodatkowej funkcji wykonywać.

3:49Jeśli chcesz znać te własności to możesz sobie tutaj zobaczyć po prostu zbadać

3:53element i zobaczyć jak on dostępne właściwości.

3:57Możesz też poszukać sobie powiedzmy HTML do API i np.

4:03na stronie Mozilla Developer Network.

4:07Tutaj mamy spis wszystkich obiektów API ze strukturą.

4:11Szukamy sobie JavaScript nowej

4:12reprezentacji linku link Kotwica czyli HTML a HTML ang.

4:17element i widzimy jego własności.

4:20Download href host host itd.

4:23Czyli możesz zobaczyć jakie własności są w

4:26tych elementach i co one robią jest u ładnie w dokumentacji opisanej teraz.

4:30Dlaczego o tym mówię.

4:31Dlatego że się modyfikuje obiekty to nie chcemy niszczyć całego elementu jeszcze

4:36raz go tworzyć chcemy tylko zmienić właściwości też nie atrybuty tylko

4:40właściwości istnieje właściwość tę wolę zmienić właściwość niż atrybut.

4:44Teraz jak to możemy zrobić.

4:46Chciałbym te dane tutaj żeby one były

4:48pobierane stąd czyli powiedzmy to jest nasz wózek.

4:51Ja bym chciał żeby ten znalazł się tutaj jako.

4:55To nie robimy tego w ten sposób nie mamy tam do tekstu

4:59jeśli zmieniamy HTML a to musimy element który chcemy modyfikować

5:03oznaczyć w ten sposób nawiasem kwadratowym.

5:05Jest to bardzo podobne do tego gdybyśmy tutaj po prostu zrobili

5:10walił tak żebyśmy dostawali do środka do obiektu tak to możesz sobie zapamiętać.

5:15I tu teraz jest to nie tekst tylko zmienna

5:18podkreśla nam że nie ma zmiennej treści więc mogę pisać user kropka.

5:26Jeśli tak to zrobię no to powinnam się pojawić tutaj.

5:30Kręcą jak i oczywiście HTML nie działa

5:32więc tu muszę upewnić się że nie ma tu HTML co dalej

5:36tytuł w ten sam sposób możemy ustawić dynamicznie.

5:41First name

5:43it to zostawię taki nie chcemy dynamicznie zmieniać mogę je nawet usunąć.

5:48Na razie data tekst.

5:51No właśnie co z atrybutami.

5:53Nie chcą robić seta Trip odbiera trybut

5:55wysłany do tego też fajny sposób możemy zrobić.

5:58A te 4 kropka

6:00i tutaj wtedy podajemy atrybut i także możemy ustawić dynamicznie i zero forsy.

6:07Możemy też np.

6:08z subskrypcji i subskrypcji i zobaczmy jak to będzie wyglądało.

6:14Czyli tak to jest własność nie atrybut atrybut Times a 4 kropka.

6:20Nazwa trybutu i tutaj wartość.

6:24I pamiętaj o kwadratowych nawiasach

6:26atrybut trolla tak samo musiałbym ustawić to w ten sposób

6:32jeśli byłoby dynamiczne dynamiczne no to nie ma sensu tego robić.

6:37Formularze nie ma sensu tak dominować może już zwykłe atrybuty.

6:40W ten sposób tylko te które mają być

6:42pobierane przez naszego obiektu tylko te kwadratowe zawiasy.

6:47Jeśli jest taka właściwość jeśli tej

6:49właściwości nie ma no to może użyć atrybutów w ten sposób.

6:53Kropka czy mamy Własność Własność atrybut.

6:58Zobaczmy jak to działa.

7:03Jest chłopcem jak i tutaj jeszcze jest import.

7:07Tekst jego wartość jest jak wszystko wygląda dobrze i subskrypcji.

7:11Jak widzisz jest forsę.

7:14Super teraz co jeszcze możemy zrobić.

7:16Powiedzmy że chciałbym ten komunikat na chwilkę ukryć.

7:19Czyli sobie to zrobimy np.

7:22ask about Fox.

7:26Jeśli to jest fałsz chciałbym to ukryć.

7:30Czyli tu wiosną mogę powiedzieć albo atrybut Hidden albo wiem że nie jest

7:34to atrybut że jesteś własność czyli mogę powiedzieć hitem ma być ukryte.

7:41Jeśli ta zmienna nie równa się.

7:48Toż to nie równa się ze prościej po prostu jeśli to jest.

7:52Odwracając forsę na true mogę skorzystać ten sam warunek czyli Ukryty.

7:57Jeśli zmienna ask about NaN nie jest

8:01prawdziwa czyli jeśli jest fałszywa i zobaczmy powinnam to zniknąć.

8:06Zniknęło.

8:07Mam tutaj atrybut Hidden które pamiętasz jest utworzony poprzez własność.

8:13Kiedy

8:14widzisz jest to praktycznie bezpośrednia manipulacja HTML em właściwym drzewem dom.

8:21Model dokumentu DOM tylko nie musimy

8:23szukać elementu po IT i wykonywać operacji tylko angole.

8:28Jak widzisz uruchamiając HTML sam

8:30wprowadza odpowiednie atrybuty własności do odpowiednich elementów HTML.

8:35Jeśli my zmienimy te dane to nam zmieni

8:37także tutaj czyli się zmieni a osoba nas w Polsce

8:42to angole ogóle sam będzie wiedział że ma być widoczny jeśli będziemy mieli.

8:48FOZZ to miał być ukryty ok. .

8:52Czyli wiemy jak zmieniać tekst i jak widać dynamiczny tekst.

8:56Wiemy jak ustawiać atrybuty

8:58i wiemy też jak nie tylko atrybuty zmieniać ale bezpośrednio modyfikować

9:03własności drzewa żeby nasz HTML zmieniał swój wygląd kształt itd.

9:07Czy możemy przekazywać różne parametry.

9:09Możemy ukrywać wartość punktów itd. Ok.

9:12To teraz co możemy zrobić możemy dodać

9:14interakcję z użytkownikiem czyli coś co zmieni dane

9:20w taki sposób żeby nam HTML odpowiednio się zmienił zmodyfikował.

9:26Ale o tym już w kolejnej lekcji tak więc.