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):

<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:

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:

@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:

<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):

<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):

@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:

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:

<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:

<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 🙂