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ę.

2 Comments

Dodaj komentarz

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