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 […]
Bez kategorii
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 ngStyle i ngClass – dynamiczne style
ngStyle i ngClass – dynamiczne style Nauczysz się dynamicznie zmieniać wygląd elementów HTML – dodawać i usuwać klasy CSS oraz ustawiać style bezpośrednio z TypeScript. Poznasz różne sposoby – od prostego bindingu po pełne dyrektywy. [class] [style] ngClass ngStyle Spis treści 1. Po co dynamiczne style? 2. Binding pojedynczej klasy 3. Dyrektywa ngClass Obiekt klas […]
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 […]
ng-template, ng-container i ng-content w Angularze
1. Czym są elementy szablonowe? W Angularze istnieją specjalne elementy, które pomagają w zarządzaniu strukturą szablonów HTML. Nie są to zwykłe elementy DOM – to narzędzia Angulara do kontrolowania tego, jak i gdzie treść jest wyświetlana. Trzy główne elementy szablonowe: Dlaczego są potrzebne? 2. ng-template – szablony do wielokrotnego użytku <ng-template> to element, który definiuje […]
Dyrektywy warunkowe w Angularze – @if i *ngIf
Dyrektywa @if – warunkowe wyświetlanie @if pozwala decydować co ma się pojawić na stronie w zależności od warunków – dokładnie jak instrukcja if w TypeScript, tyle że w szablonie HTML. Nauczysz się też jak wyglądał stary sposób z *ngIf. @if @else if @else *ngIf Spis treści 1. Czym jest @if? 2. Podstawowa składnia 3. @else […]
Dyrektywy pętli w Angularze – @for i *ngFor
Dyrektywa @for – pętla w szablonie @for pozwala wyświetlić całą listę elementów z tablicy – bez kopiowania kodu HTML dla każdego elementu. Jeden szablon, dowolna liczba elementów. Poznasz też słowo kluczowe track i zmienne pomocnicze pętli. @for track $index @empty Spis treści 1. Czym jest @for? 2. Podstawowa składnia 3. Słowo kluczowe track 4. Iteracja […]
Komponenty Angular
Komponenty – budulec aplikacji Komponent to podstawowy budulec każdej aplikacji Angular. Nauczysz się tworzyć własne komponenty, rozumieć ideę standalone i składać z komponentów większe aplikacje – jak z klocków LEGO. @Component standalone ng generate selector Spis treści 1. Czym jest komponent? 2. Standalone – nowe podejście 3. Struktura komponentu Pliki komponentu Dekorator @Component 4. Tworzenie […]
Interpolacja w Angularze
Interpolacja – dane w szablonie Interpolacja to pierwszy i najważniejszy mechanizm Angulara – pozwala wyświetlać dane z TypeScriptu bezpośrednio w kodzie HTML. Zrozumiesz jak komponent „komunikuje się” ze swoim szablonem. {{ }} component wyrażenia property binding Spis treści 1. Czym jest komponent? 2. Składnia interpolacji 3. Typy danych Liczby i tekst Tablice i obiekty 4. […]