Wróć do strony głównej
Angular

Angular Tips & Tricks cz. VI

Witam w kolejnej odsłonie Tips & Tricks! Tradycyjnie 7 przypadków, o których być może nie miałeś/aś pojęcia do tej pory, enjoy!

1. Wyłączenie animacji

Bardzo przydatny trik, jeśli chcemy wyłączyć animację w komponentach np. z Angular Material, w których najczęściej nie ma możliwości wyłączenia animacji (np. ExpansionPanel, TabsGroup):

Wystarczy na dany element nałożyć atrybut [@.disabled]=”true”. Wyłączy to animacje (te oparte o Animations Web Api, nie CSSowe!) w komponencie, oraz jego dzieciach. Ba, można nawet nałożyć ten atrybut na główny selektor app i wyłączyć animacje w całej aplikacji.

2. NgOnDestroy w serwisie

Nie tylko komponenty mają dostęp do hooków. Także w serwisie możesz dodać hook ngOnDestroy(). Może się to przydać w serwisach, które są dodane na poziomie metadaty komponentu, w tablicy providers i które przestają istnieć wraz ze zniszczeniem komponentu.
Przykład:

DEMO: https://stackblitz.com/edit/angular-ctrhp1?file=src/app/hello.component.ts

3. ngProjectAs

Ciekawy atrybut, o którym nie ma ani słowa w oficjalnej dokumentacji (wisi nawet Issue na Githubie o braku docsów na temat ngProjectAs).
Po co to? Już wyjaśniam. W Angularze możemy wykonać component projection w następujący sposób:

Poprzez <ng-content> tworzymy tzw. slot (gniazdko) gdzie możemy umieścić element np. o zadanym selektorze, w tym przypadku „bar”. Użycie wygląda następująco:

Atrybut ngProjectAs przyda nam się w sytuacji, gdy komponent który przekazujemy do tego gniazdka, będzie opakowany w inny selektor (np. ng-template, ng-container, czy jakikolwiek inny):

Bardzo rzadki use case, ale może kiedyś się komuś przyda, np. w sytuacji skorzystania z jakiejś biblioteki, gdzie do gniazdka chcemy przekazać swój komponent a nie ten pochodzący z liba.

4. Nałożenie animacji na hosta

HostBinding, który pozwala nałożyć atrybut na hosta (np. na komponent), akceptuje również animacje (w końcu sa aplikowane jako atrybuty):

Pamiętaj, aby ominąć kwadratowe nawiasy, które standardowo używa się nakładając animację na element (  ’@fadeOut’ zamiast '[@fadeOut]’)!

5. CompilerOptions

Angular pozwala na zmianę niektórych ustawień kompilatora:
Interface: https://angular.io/api/core/CompilerOptions
Możemy to zmienić to w pliku main.ts:

6. RouterOutlet events

Możemy nasłuchiwać na eventy związane z RouterOutletem:

Event na aktywację zostanie wyemitowany gdy powstanie nowy komponent  w router-outlet, a na dezaktywację gdy ów komponent zostanie zniszczony.

7. KeyValuePipe (od Angular 6.1.0)

W Angular 6.1.0-beta-3 pojawił się nowy pipe – KeyValue. Od teraz możemy chociażby puszczać *ngFor po obiektach lub mapach:

Tyle na dziś, mam nadzieję, że chociażby jeden tip jest dla Ciebie nowy 🙂

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

3 komentarzy

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *