ANGULAR – NgForTemplate & NgForOfContext

Emocje po konkursie opadły, więc czas dalej dowozić nowy kontent na bloga! Od jakiegoś czasu trapiła mnie (ahh, te problemy developera) nieznajomość tworzenia list z dowolną templatką, umieszczoną w <ng-template>.

NgForTemplate

Jeśli spojrzymy do dokumentacji dyrektywy ngFor, to możemy zuważyć settera:

…który jako typ, przyjmuje TemplateRef, który reprezentuje np. jakiś wycinek kodu HTML osadzony w tagach <ng-template>.

Dzięki ngForTemplate, możemy w naszym selektorze komponentu z listą, umieścić dowolny html i użyć go jako kontekstu w NgFor. Przełóżmy to na kod, gdzie wykorzystamy w/w ngForTemplate. Stworzymy listę samochodów:

W powyższym kodzie, carTemplate wskazuje na templatkę przekazaną do naszego komponentu. Więc sięgamy po nasz komponent <cars-list> w widoku gdzie chcemy go wykorzystać i przekazujemy do niego sobie dowolną templatkę:

Czyli nasz carTemplate, przekazany do [ngForTemplate], jest dokładnie tym kawałkiem kodu HTML:

Zanim przejdziemy dalej, zwróć uwagę na:

Let- wskazuje na element, po którym idą kolejne iteracje – w naszym przypadku jest to obiekt car, z którego odczytujemy np. propercję car.name. Tych obiektów może być więcej, możesz napisać:

Let tworzy zatem lokalna zmienną dla templatki do której możemy się zbindować.

Jednak nadal, powyższy kawałek HTML z paragrafem i nazwą samochodu, nie zostanie wyrenderowany. Brakuje nam referencji do tej templatki z poziomu komponentu <cars-list>. Więc musimy ją stworzyć, za pomocą dekoratora @ContentChild.

Sięgamy po nasz zagnieżdzony kontent o typie TemplateRef za pomocą ContentChild, zapisujemy go pod nazwą carTemplate, a ten carTemplate ląduje sobie w naszym [ngForTemplate]:

NgForOfContext

W poprzednim akapicie, widzimy coś takiego jak NgForOfContext:

TemplateRef musi być zinterpretowany w zadanym kontekście i właśnie tutaj wskazujemy jaki jest kontekst TemplateRefa w naszym ngFor.

Wykorzystajmy to co przygotowaliśmy, możemy już do naszego komponentu <cars-list>, przekazywać dowolne templatki:

Plunker z kodem (jeśli się nie kompiluje, włącz tryb incognito w chrome):

LIVE EXAMPLE

PODSUMOWANIE

Być może w tym momencie myślisz, a po co mi to? przecież mogę templatki wydzielić do osobnego komponentu, np. <car-item> i wywołać to w następujący sposób:

Niby tak. Ale  jeśli często iterujemy po tej samej tablicy na widoku, np. liście produktów, gdzie wyświetlamy ją z różnymi detalami (np. samymi nazwami, raz z samymi zdjęciami etc), to nie ma sensu tworzyć 5 osobnych <products-list>, lub 5 osobnych komponentów <product-item> o różnych templatkach. Można stworzyć listę raz i podrzucać tylko jej nowe templatki właśnie za pomocą NgForTemplate, tam gdzie sięgamy po tą listę.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *