Angular: Dyrektywy ngStyle i ngClass

Angular 10+

0:01Wiemy już jak wykorzystać komponenty żeby podzielić sobie stronę tutaj na stronę

0:06żeby jakieś bloki wizualne z dodatkową treścią.

0:10Tutaj selekcjoner powinien zbudować coś bardziej zaawansowanego czego czy my

0:14możemy tutaj parametry stawiać komponenty przekazywać już informacje o Mińsk.

0:20Mamy takie paski postępu.

0:22Te paski postępu można praktycznie

0:24wykorzystać jako gotowe buty atrapa chciał mnie

0:28HTML a nie było kopiować za każdym razem w ten sposób tylko mógł sobie stworzyć

0:32komponent przekazać odpowiednie parametry i tych parametrów.

0:36Mógł takie różne różnego rodzaju paski postępu używać w różnych miejscach w

0:43aplikacji zaćmy wygenerowanie nowego komponentu

0:49czyli generator komponent zrobię to także w folderze komponent czyli komponent.

0:59I nazwę go powiedzmy Progress para.

1:03Po pasek postępu to nowy generuje nowy komponent

1:07i ten nowy komponent ja tutaj już umieszcza na stronie powiedzmy jest jedna

1:12kolumna z którą kolumnę i w tej drugiej kolumnie życzę sobie aby

1:19progres padł i ten nowo wygenerowany komponent możemy

1:24nawet trzy razy użyć był już trzy paski postępu i teraz bar na progres bar płaski

1:32i progres bar jeszcze przykładowy HTML zbór powinien mieć trzy paski postępu.

1:38Zobaczmy.

1:42Nie są zbyt eleganckie ale mamy trzy paski

1:44postępu i teraz powinniśmy móc stawić im jakiś progres.

1:49Tak stawiam sobie progres.

1:52Zobaczymy jak to będzie wyglądało.

1:54Mamy różne parametry parametry i atrybuty aria służą do czytników ekranu dla osób

2:00słabo widzących nie widzących jest to bardzo przydatna informacja.

2:04Tutaj w środku musi mieć szerokość czyli styl szerokość to jest 25 proc.

2:11I to powinien zrobić ładny pasek który ma szerokość 25 proc.

2:15mają wszelkie tą samą szerokość.

2:17Chciałbym lub naszego komponentu przekazać odpowiednie parametry

2:21czy wciąż ta wartość mogą być przekazywane jako parametr do każdego z tych pasków.

2:27Teraz mamy kilka opcji możemy przeprowadzić dynamiczny parametr lub

2:30przekazać ostateczną wartość czyli w tym progres bar komponent.

2:35Jeśli ja chcę przekazać wartość tylko raz

2:37na starcie i później nie chcę je zmieniać to mogę w konstruktorzy

2:42napisać sobie powiedzmy atrybut to trzeba za importować tutaj sam kolor

2:50i atrybut to jest jakby stała wartość który nie będziemy zmieniać.

2:55Czyli powiedzmy jakieś etykieta typu string.

3:02I tu podaje nazwę przez to.

3:05Teraz mogę do każdego z tych elementów

3:06przekazać normalnie jako zwykły atrybut etykietę czyli np.

3:12wartości które tutaj chcieliśmy mieć.

3:17CSS HTML z każdych parametrów które tu przekażę trafi do konstruktora

3:25każdego z tych komponentów czy ten sam komponent tą samą jedną klasę

3:29używamy trzy razy żeby już trzy komponenty trzy obiekty.

3:32Pierwszy jest bar drugi trzeci i za karę tworząc taką klasę taki obiekt tej klasy.

3:37Inne parametry i te parametry to przekażemy do tego konstruktora.

3:42Możemy w HTML u progres bar komponent czyli w programie z kompletem L

3:47możemy tu użyć jako na przykład taki label w którym gdzieś u góry etykieta

3:54jakiś odstęp może i tutaj już tej zmiennej którą przekazali nam rodzice.

4:03Zobaczmy teraz jak to działa.

4:07CSS HTML super.

4:08Teraz ta wartość którą tu mamy.

4:11Powiedzmy że tę wartość będzie musieli zmieniać.

4:13Będzie mieć teraz 30 już mógł zmieniać animowane itd.

4:17To tam była dynamiczna i teraz dynamicznie wartości przekazać

4:21to nie mogę być jego konstruktorzy to konstruktor otrzymuje wartość tylko raz

4:25tak jak nazwa mówi przy konstruowaniu obiektu.

4:28Jeśli chcesz mieć parametry które już się zmieniają to do tego jak pamiętasz import

4:34i import pozwala tworzyć dynamiczna wartość.

4:37Jeśli masz wątpliwości czułość atrybuty

4:38czy impulsu no to lepiej użyć jest pusta zawsze wtedy będziesz się zmieniał.

4:43Zatem jeśli masz pewność że to jest raz

4:45tylko podaję tę wartość ten atrybut już nie będzie nigdy zmieniał

4:49nie będzie dynamiczny not mógł użyć atrybutów czyli będzie dynamiczne

4:55i ustalimy że to bez klamek a być też string.

5:00Na początku że to jest zero.

5:03I teraz to możemy tu wykorzystać dynamicznie czyli Still kropka.

5:10To jest 25 proc.

5:12mnie to jest nasza wartość.

5:15Tu jest bardzo fajna rzecz nie muszę tych

5:17procentów dodawać w tym miejscu mogę procenty dodać sobie tak z tej strony.

5:24Super.

5:25I to samo walił też mogę już do tych atrybutów karpia.

5:30Tylko że atrybuty pamiętasz musimy użyć w specjalny sposób.

5:33Jeśli nie ma takiego czegoś jak aria walił się zbadać to obiekt nie ma takiego.

5:38Takie rzeczy mówi ten tyle minus.

5:40Nam też sugeruje muszą użyć atrybut

5:44w ten sposób czyli atrybutów przez cztery kropka.

5:48I mogę się czegoś komuś Bartosz walił.

5:52Natomiast własności które są dynamiczne mogę w ten sposób zdradzić.

5:57Rodzic jeśli nie przekaże nic to będzie wszędzie zero to możemy zobaczyć.

6:02Jest zero jeśli uruchamiając ten komponent

6:05Progress bar dziś każdemu z nich przekaże inną wartość.

6:09Mógłbyś to w ten sposób.

6:15W ten sposób mógł też użyć tutaj dowolnego tak dynamicznego wyrażenia czyli np.

6:2150 plus 25 zmiennej funkcji.

6:25Mogę to przypisać label musi mieć wartość

6:28ostateczną stałą nie mogę zmieniać dynamicznie.

6:32Tak czy każdy z nich tych komponentów ma

6:34ta sama HTML CSS czy nawet szykujemy różne parametry różne dane które możemy później

6:40na różne sposoby wykorzystać w tym miejscu.

6:42Co jeszcze mamy.

6:43Mam tutaj jeszcze dodatkowe style kolory zobaczmy tak wysokość kolor

6:52etykieta etykieta już mamy powiedzmy że chciałbym móc ustawić

6:57wysokość albo wysoki albo taki cienki ustawić np.

7:02tutaj jakieś urocze statusem sukces info

7:05working i taki tryb jak Script czy też takie paski można było też włączyć

7:11wyłączyć w aplikacji czyli nasz komponent komponent musi dostać dodatkowe

7:17atrybuty i powiedzmy to czy on jest gruby czy cienki czy ma te paski.

7:21Nie miałem tego za bardzo zmieniać

7:23striptiz czyli paski raz ustawiamy nie zmieniamy czy jest gruby czy cienki.

7:30Tego też czy nie będziemy dynamicznie zmieniać.

7:34W ten sposób ustawienie jest fajna rzecz bo nie muszę tutaj

7:37właściwie podawać parametrów i chcemy tylko żeby to tchórz

7:41Falls wystarczy że ja tam taki atrybut w ten sposób Strip

7:47i już żadnej wartości też istnieje tutaj będzie on już jako trup w nim zostawimy.

7:54Dla porównania żeby go nie było.

7:56I jeszcze ten status taki status może się zmienić więc ta dynamicznie.

8:06Status niech będzie strajk

8:09i teraz tak musiał litewski parametry które tu przekazuje różne statusem.

8:14To miał być czerwony hangar mógł dynamicznie zmieniać

8:19ale też bez impulsów mógł przekazać tekst w ten sposób.

8:22Tak czy nie muszę dynamicznie wartość mogę

8:24też jako tekst bo chyba Danger zobaczmy czerwone info sukces

8:33czyli Danger status info i status sex super tester parametry które tu

8:42przekazujemy my się tu pojawiają w krypcie i w HTML te

8:47komponenty możemy je wykorzystać czyli odtworzyć sobie tutaj jeszcze raz a

8:51Progress Bar może z tej strony Progress Park HTML tez możemy te wszystkie

8:55informacje które tu mamy możemy wykorzystać czyli Strip.

9:00No to jeśli powiedzmy Progress Bar

9:04jak powiadasz możemy sprawdzić w ten sposób klas

9:10zobacz jak to wygląda w stropie Strip to jest Progress bar Street.

9:15Chcemy żeby ta klasa

9:17tylko aktywna kiedy tu mamy ten parametr Strip czyli Progress bar Script

9:26tylko wtedy jest aktywne kiedy Strip równa się tak czy ta zmienna Strip PET.

9:38Okazuje się że jedno jest potrzebne. Czyli mój błąd.

9:41To tu zmienia Script striptiz.

9:45I wtedy też zmienisz to moją literówki.

9:49żeby było przez jeden dzień strajku OK.

9:52Czyli chcemy żeby było w paski.

9:54Więc zobaczymy tu.

9:55Jeśli ktoś przekaże paski to tu się pojawią.

9:58Jeszcze dla testu usunął z jednego z nich

10:01paski zobaczymy czy na prawidłowo zadziała.

10:06I coś jest nie tak bo naszych pasków tutaj nie widać.

10:10Więc jak to sprawdzić.

10:12Tu przekazujemy różne atrybuty do konstruktora i teraz tutaj.

10:16Ja mam jeszcze słówko Damage że nerka się zatrzymała w tym miejscu już

10:20mógł podejrzeć co się kryje w tych parametrach.

10:24Czyli jesteśmy tutaj Progress bar

10:25komponent wiesz nic musiałem specjalnie robić po prostu przeglądarka ma otworzyć

10:29kiosk opartą konsolę automat się zatrzyma w tym miejscu i mogę

10:33zbadać poszczególne zmienne Chin jest striptiz z pustym stringi.

10:40I label jest Muller czyli Wish Straight.

10:45Pierwszym komponentu jest pustym ringiem

10:47czyli przekazem pusty String tutaj puściłem go dalej kontynuuje.

10:53Drugi komponent już CSS Strip jest pustym stronie kontynuuje.

10:59W trzecim elemencie w tym elemencie którym nie ma trybu stricte zamiast pustego

11:04treningu wprowadziłem cię w błąd że jak podam sam parametry bez niczego to

11:10nie będzie toru tylko będzie po prostu pusty.

11:13Czy to jest to samo co pomysł pusty string.

11:17A jak nie napiszę tego straight to to samo co mi zrobił po prostu coś takiego

11:23równa się nurt odczuwa każdy muszę włączyć w ten sposób atrybuty i też krzyczy na

11:29mnie od razu że nie mogę dynamicznie przekazywać wartości do atrybutów

11:34dynamiki mogę tylko przekazywać import atrybuty nie mogę robić dynamicznie.

11:39Ok czyli robimy w ten sposób i muszę pamiętać postawić tutaj mur

11:44czyli wchodzimy w progres komponent i nie równa się tylko jeśli nie równa się ból.

11:52Ok.

11:54Zobaczmy teraz tam czy to zadziała tutaj muszę pochwalić Top Gear.

11:59Nie przeszkadzało F5 i mamy paski i ten trzeci jak widzisz nie ma paska.

12:07Jest wszystko OK co status musimy sprawdzić status test

12:11można zrobić to w ten sam sposób czyli klas powiedzmy b g info.

12:18Jeśli co jeśli status quo równa się

12:22info i tak musiałem zrobić to dla każdego elementu osobno czy Węgier

12:29i tam jeszcze było był sukces raczej za każdym razem się zmieni status

12:35ten dynamicznie lub nie to chcę zmienić klasę info Danger sukces

12:39zależy od tego jaki jest status to wszystko oczywiście będzie sam

12:43a ktoś zawał wędrował i jeszcze zmieni w z powrotem.

12:47Bochum komponent dodam do wszystkich Strip żeby to się sprawdzało

12:53i teraz zajrzymy do ośrodka progres bar czy widzisz tutaj ileś różnych klas ustala

12:59tutaj mógłbym też wyświetlić na przykład jeszcze wali

13:02w środku się w pasku wyświetlają też jakieś style ustawia

13:07tryb jest tylko jeden styl ale mógłbyś tych też więcej procenty piksele.

13:15że nie będzie tam bardzo cienki jeśli coś niż jest Tin.

13:20Tak samo Fin nie równa się.

13:24To niech będzie cienki

13:26a zrobieniem auto cokolwiek było oryginalnie możemy też zamiast pikseli np.

13:32wiem kremów

13:34wystawiłem przed ma być bardzo cienki lub normalna wysokość czcionki

13:40i zobacz ile różnych klas ustala ileś różnych stylów.

13:45I to jest jeden sposób jeśli masz wiele różnych klas dodaje iż ty

13:50jesteś jednocześnie tym elemencie to można to inaczej zapisać.

13:55Takie klasy możemy zgrupowane w jedno księgi klas.

14:02I pociski klasy jako obiekt jako mapę

14:05gdzie każdy klucz tego obiektu jest nazwą klasy CSS owej

14:12czyli nazwa klasy CSS a wartością jest wyrażenie

14:19czyli czy status równa się info czy status równa się Węgier czy sukces czy

14:25ktoś różnych klas od razu sprawdzić tylko ta uwaga bo jak nazwie klasie są silniki.

14:31Oczywiście tak jak w obiektach trzeba w krypcie opiekować to w ten sposób.

14:48Czyli to jeszcze klasa progres.

14:52Tak może w jednym takim związaniu

14:55od razu sprawdzić ilość różnych warunków i ustawić ileś różnych klas.

15:00Tak czy nie musimy każdy osobno możemy to zrobić w ten sposób.

15:05To komentuje jeśli chodzi o style.

15:08Ta sama zasada ja chcę mieć kilka naraz.

15:12To jest dyrektywa

15:14tak Aguero dodaje swój własny specjalny atrybut który pozwala ci zrobić prościej

15:19szybciej czyli mogę ileś rzeczy za jednym razem zmienić czyli mały procent.

15:26To się równa

15:30i RM się równa i podatek ten sam warunek tutaj masz porównać ten zapis tu i tu.

15:43Jeśli po kilka klas jest to troszkę mniej pisania.

15:49I też widać od razu wszystkie klasy się zmieniają tak.

15:52Czyli jeśli ten warunek jest prawdziwy przy oderwaniu dodaj klasę

15:56jeśli któryś warunek jest fałszywy zmienił się na forsę.

15:59No to usuń tą klasę i tak samo style

16:02wartość w Realu przy tej własności czasowej wartość tego wyrażenia.

16:0902 albo 1 przy przecież tutaj zobaczmy.

16:15No i super paski postępu.

16:17Każdy ma inny kolor inny styl inne

16:19wartości czy komponenty możemy nie tylko wygląd zachowanie treść

16:24przekazywać i możemy na różne sposoby w różnych kompletach

16:29kombinować wartości tego komponentu czyli dane liczbowe skryptu bin dodać do klas do

16:36stylu do tekstu jako statyczne atrybuty lub jakieś dynamiczne wartości tutaj

16:43poprzez import import będzie się dynamicznie zmieniał jeśli rodzic przekaże

16:48tutaj inną wartość lub zmienna wreszcie coś się zmieni na inną wartość to akurat

16:53cos ciekawego zobaczę te klasy B Info Info węgiel będziesz sukces sukces

16:59One tak mają bardzo takie właściwie takie same nazwy

17:02więc my możemy malować to ręcznie klasa do elementu elementu.

17:07Natomiast te klasy też bardziej dynamiczne to też możesz po prostu użyć słówka klas

17:13bez podawania tutaj klasy I tu ktoś dynamicznie czyli powiedzmy BG

17:20leśnik plus status z klasy to razem nie musimy kupować Tesco.

17:27Ciekawe czy mimo że tutaj jakby przekazuje

17:30cały obiekt klas cały parametr klas to on nie pisze tej klasy którą tu mamy.

17:36Nie pisz tych klas które tu się znajdują.

17:39On tylko i to da te nowe klasy lub usunie te klasy dalej

17:45będzie status pozostałe klasy powinien zostawić bez zmian.

17:49Nadal to działa bez problemu mam te same

17:51kolory te same style tak czyli można kupić statyczne klasy.

17:55Możesz cały obiekt mapę klas i jakieś wartości.

18:00Możesz też całkowicie dynamicznie

18:03wygenerować nazwy klas które chcesz przekazać dyrektywy.

18:07Tutaj będzie klas.

18:09Pozwalają nam troszkę lepiej uporządkować krócej napisać po prostu w wiele różnych

18:14style które chcemy dynamicznie przekazać do naszego komponentu.