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):
1 2 3 4 5 |
<mat-tab-group [@.disabled]="true"> <mat-tab label="First"> Content 1 </mat-tab> <mat-tab label="Second"> Content 2 </mat-tab> <mat-tab label="Third"> Content 3 </mat-tab> </mat-tab-group> |
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:
1 2 3 4 5 6 7 8 |
import { OnDestroy, Injectable } from '@angular/core'; @Injectable() export class HelloService implements OnDestroy { ngOnDestroy() { console.log('Hello Service destroyed!'); } } |
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:
1 2 3 4 5 6 7 8 9 |
@Component({ selector: 'foo-component', template: ` <div class="container"> <ng-content select="bar"></ng-content> </div> ` }) class FooComponent {} |
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:
1 2 3 |
<foo-component> <bar></bar> </foo-component> |
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):
1 2 3 4 5 |
<foo-component> <ng-container ngProjectAs="bar"> <bar></bar> </ng-container> </foo-component> |
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):
1 |
@HostBinding('@fadeOut') withFade = true; // tutaj np. flaga |
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:
1 2 3 4 5 6 7 |
platformBrowserDynamic() .bootstrapModule(AppModule, { useJit: true, defaultEncapsulation: ViewEncapsulation.None, preserveWhitespaces: false, ngZone: 'noop' // a to z BootstrapOptions }); |
6. RouterOutlet events
Możemy nasłuchiwać na eventy związane z RouterOutletem:
1 2 3 4 |
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'> </router-outlet> |
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:
1 2 3 |
<div *ngFor="let item of object | keyvalue"> {{item.key}} : {{item.value}} </div> |
Tyle na dziś, mam nadzieję, że chociażby jeden tip jest dla Ciebie nowy 🙂
KeyValuePipe oraz ngProjectAs na pewno się przyda.
Dzięki 🙂
Gdzieś na fejsie już wcześniej wpadł mi w oczy ten blog.
Absolutnie fenomenalny zbiór wiedzy!
Yaskier, Pozdrawiam
Bardzo fajny posty. Dla mnie najbardziej inspirujące są: keyValuePipe i event’y na router outlet 🙂
P.S pozdrawiam, autora. Super blog!