Bez kategorii
PipesPipes w Angularze – transformacja danych
1. Czym są Pipes? Pipes, znane również jako filtry, to funkcjonalność Angulara, która pozwala na transformację danych wyświetlanych w szablonach aplikacji, bez zmiany samej formy tych danych. Pipes są używane do formatowania danych bezpośrednio w szablonach HTML, co czyni je niezwykle przydatnym narzędziem w tworzeniu interfejsów użytkownika. Analogia z życia: Pipe = Filtr do kawy […]
Lifecycle Hooks (haki życia komponentu)
1. Czym są Lifecycle Hooks? Lifecycle Hooks, czyli haki życia komponentu, to specjalne metody w Angularze, które oferują możliwość interwencji w różne momenty cyklu życia komponentów i dyrektyw. Dzięki nim, deweloperzy mogą wykonywać określone akcje w kluczowych momentach, takich jak inicjalizacja komponentu, detekcja zmian, czy też jego zniszczenie. Analogia z życia: Komponent = Człowiek 🧑 […]
Komunikacja między komponentami w Angularze
1. Wprowadzenie – rodzina komponentów Wyobraź sobie komponenty jako rodzinę: Komunikacja w aplikacji filmowej: 2. Typy komunikacji 🔽 RODZIC → DZIECKO (@Input) 🔼 DZIECKO → RODZIC (@Output + EventEmitter) ↔️ RODZEŃSTWO ↔ RODZEŃSTWO (Service) 3. Komunikacja RODZIC → DZIECKO (@Input) Jak to działa? Przykład: Lista filmów → Karta filmu Krok 1: Dziecko przyjmuje dane (@Input) […]
Dyrektywa ngClass w Angularze
1. Czym jest ngClass? ngClass to dyrektywa Angulara umożliwiająca dynamiczne dodawanie lub usuwanie klas CSS na elementach HTML w zależności od stanu danych lub logiki aplikacji. Jest to bardzo przydatne narzędzie do kontrolowania prezentacji komponentów bezpośrednio z poziomu kodu TypeScript, co zwiększa elastyczność i możliwości dostosowania interfejsu użytkownika. Przykłady zastosowań: 2. Jak działa ngClass Dyrektywa […]
Dyrektywa ngStyle w Angularze – dynamiczne stylowanie
1. Czym jest ngStyle? Dyrektywa ngStyle to narzędzie w Angularze, które pozwala na dynamiczne ustawianie stylów CSS elementów na podstawie danych z komponentu. Dzięki niej możemy zmieniać wygląd elementów w zależności od różnych warunków. Przykłady zastosowań: Podstawowa różnica: 2. Podstawowa składnia ngStyle Gdzie: Ważne: Musisz zaimportować CommonModule w komponencie! 3. Przykłady – od prostych do […]
Zmienne Szablonowe w Angularze
Zmienne szablonowe – #referencja Zmienne szablonowe pozwalają „złapać” element HTML lub komponent za pomocą nazwy z kratką i używać go w innych miejscach szablonu. To proste narzędzie, które oszczędza dużo kodu TypeScript. #zmienna template reference zdarzenia ViewChild Spis treści 1. Czym jest zmienna szablonowa? 2. Składnia – znak # 3. Odczyt wartości pola 4. Przekazanie […]