1. Dlaczego obrazki w aplikacji? Obrazki to podstawowy element każdej nowoczesnej aplikacji webowej: Gdzie mogą być przechowywane obrazki: 2. Struktura folderów dla obrazków w Angular Standardowa struktura projektu: ❓ Dlaczego NIE używamy folderu public/? Folder public/ (jeśli istnieje) vs assets/: Cecha assets/ ✅ public/ ❌ Optymalizacja Angular kompresuje i optymalizuje Kopiowane bez zmian Cache busting […]
Angular
Komunikacja między komponentami rodzeństwa – Serwis
1. Czym jest serwis w Angularze? Serwis to specjalna klasa w Angularze, która: Analogie z życia: W czym serwis pomaga? Kiedy tworzymy serwis? 2. Czym jest komunikacja rodzeństwa? Komponenty rodzeństwa to komponenty, które są na tym samym poziomie w hierarchii – mają tego samego rodzica, ale nie są swoimi rodzicami ani dziećmi. Przykład z życia: […]
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 (ang. template variables) w Angularze to potężne narzędzie, które pozwala na bezpośredni dostęp do elementów DOM oraz ich właściwości bez potrzeby definiowania dodatkowych zmiennych w komponencie TypeScript. Umożliwiają one interakcję z elementami szablonu, takimi jak pola formularza, przyciski czy komponenty, bezpośrednio w pliku HTML. Jak działają zmienne szablonowe? Zmienne szablonowe są tworzone w […]
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
1. Czym są dyrektywy warunkowe? Dyrektywy warunkowe to narzędzia w Angularze, które pozwalają na pokazywanie lub ukrywanie elementów na stronie w zależności od określonych warunków. To jest bardzo przydatne, gdy chcemy, aby część treści była widoczna tylko w określonych sytuacjach. Przykłady zastosowań: 2. Nowoczesna składnia @if (Angular 17+) Angular wprowadził nową, lepszą składnię – @if. […]