ANGULAR – Tips & Tricks cz. III

Witam w kolejnym artykule z serii Angular Tips & Tricks! Wg statystyk Google Analitycs, cieszy się największą ilością wyświetleń, więc postaram się częściej dodawać arty z tej z serii. Zatem do meritum!:)

1. Wstrzymanie EventEmmitera

Zapewne jak wiesz, komponent dziecko może się komunikować z komponentem rodzicem poprzez dekorator @Output. Zdarzają się sytuacje, że chcemy wstrzymać możliwość wysyłania eventów. Jeden sposób, to odbiór parametru EventEmittera i dodanie odpowiedniego IFa, na który powiedzmy funkcja nasłuchiwująca ma się od razu zakończyć. Jednak w ten sposób nadal wysyłamy eventy wysyłane poprzez emit().

Aby faktycznie wstrzymać wysyłanie eventów, musimy skorzystać z metody .complete() z biblioteki RxJS.

@Output() sayHello = new EventEmitter<string>();
...
this.sayHello.complete();

Poniżej plunker z przykładem, musisz otworzyć konsolę aby zobaczyć efekt:

STOP EVENTEMITTER

2. Event keyup

Angular udostępnia nam łatwe obsługiwanie eventów, np za pomocą metody (click). Bardzo możliwe, że korzystałeś już z (keyup), np. w formularzach:

<input (keyup)="doSomething()"></input>

Często w aplikacjach jest tak, że np pole automatycznie zatwierdza się po kliknięciu guzika enter, lub kliknięcie strzałkę w górę, wraca do ostatnio wpisanego tekstu. Zamiast dopisywać swój własny kod, na obsługę np. entera, możemy skorzystać ze sprecyzowanej metody keyup w jednej z poniższych postaci:

<input (keyup.enter)="doSomething()"></input>
<input (keyup.arrowUp)="doSomething()"></input>
<input (keyup.arrowDown)="doSomething()"></input>
<input (keyup.esc)="doSomething()"></input>
<input (keyup.arrowDown)="doSomething()" (keyup.arrowUp)="doSomething2()"></input>

Znaczenie enter / arrowUp / arrowDown / esc, zakładam, że jest jasne:-).

3. valueChanges w ReactiveForms i unscubscription

Używając ReactiveForms, możemy nasłuchiwać na zmianę wartości konkretnej kontrolki w formularzu w następujący sposób:

const ctrl = new FormControl('', Validators.required);
ctrl.valueChanges.subscribe((value) => {
  console.log(value);
});

Trzeba pamiętać, że w tym przypadku, Angular nie odepnie subskrypcji za nas np. w przypadku opuszczenia widoku (komponentu), tak jak to robi automatycznie w większości przypadków.

Poprawne rozwiązanie:

ctrlSubscription : Subscription;

const ctrl = new FormControl('', Validators.required);
this.ctrlSubsscription = ctrl.valueChanges.subscribe((value) => {
  console.log(value);
});

ngOnDestroy() {
  this.ctrlSubscription.unsubscribe();
}

Zatem przypisujemy valueChanges.subscribe do pola klasy, a następnie w hooku ngOnDestroy, odpinamy się od subskrypcji.

4. Zmiana tytułu za pomocą klasy Title

Standardowo aplikacje SPA, posiadają ten sam tytuł na każdym widoku. No ale być może chcemy z jakiegoś powodu poprawić SEO naszej aplikacji? Angular udostępnia nam serwis Title. Jeśli chcemy aby widok z danym komponentem miał swój tytuł (tytuł widzimy zawsze u góry, w karcie przeglądarki), możemy to zrobić w następujący sposób:

1. Importujemy klasę Title z platform-browser, następnie dodajemy ją do providers w app.module.ts:

import { BrowserModule, Title } from ‘@angular/platform-browser’;

@NgModule({
  ...
  providers: [Title],
  ...
})

export class AppModule {}

2 . Przechodzimy do komponentu, wstrzykujemy serwis Title:

public constructor(private title : Title ) {}

3. Klasa Title ma dwie metody,  getTitle() oraz setTitle(string). Wykorzystamy setTitle do ustawienia tytułu:

ngOnInit {
 this.title.setTitle('My new page title');
}

W tym momencie, w karcie ustawi się nasz nowy tytuł, gdy odwiedzimy nasz konkretny komponent.

5. Then i Else

Chyba już wszyscy się dowiedzieli, że Angular4 udostępnia nam „else” w *ngIf. Ale być może nie wiesz, że możesz skorzystać z „then”:

<div *ngIf="myCondition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Jeśli myCondition === true, to wyświetl ten template</ng-template>
<ng-template #elseBlock>Jeśli myCondition === false, to wyświetl ten template</ng-template>

6. Pipes nie tylko na widoku

Angular udostępnia nam Pipes, które najczęściej odpowiednio formatują nam wartości na widoku, np:

{{ 12 | percentPipe }}

Dobrze wiedzieć, że dany Pipe możemy wstrzyknąć jako serwis do klasy komponentu. Najpierw musimy go zarejestrować w providers w app.module.ts (i oczywiście zaimportować):

@NgModule({
...
  providers: [PercentPipe]
...
});

Następnie w komponencie wstrzykujemy wybrany Pipe:

constructor(private percentPipe : PercentPipe) {
  const num = 12;
  const percentNum = this.percentPipe.transform(num);
  console.log(percentNum);
}

Wystarczy wywołać metodę transform, vuala:-)

7. Nasłuchiwanie na window events

Obiekt window może nasłuchiwać na takie eventy jak scroll, lub np. resize. W jQuery bardzo wygodnie się to robi:

$(window).on('resize', handler);

Co ciekawe, w Angularze możemy zrobić to jeszcze prościej. Wystarczy w templatce przypisać event np do diva:

<div (window:resize)="onResize($event)">Some content</div>

<div (window:scroll)="onScroll($event)">Some content</div>

I w komponencie nasze handlery:

onResize(event) {
  console.log(event.target.innerWidth);
}

onScroll(event) {
  console.log('Say Hello');
}

Generalnie ciekawa sprawa:) To by było na tyle w tym odcinku!