Misc

Async as

use async as syntax as much as possible (reduces subscriptions / stream calls / complexity)

<div *ngIf="(user$ | async) as user">
    {user.name}}
</div>

NgIf Else

*ngIf="value"; else notValue as an easy alternative to *ngIf="!value"

<div *ngIf="isLoggedIn; else loggedOut">
    Welcome back, friend.
</div>
<ng-template #loggedOut>
    Please friend, login.
</ng-template>

Input with observables

Pass values to components instead of observables to reduce coupling

If observables are passed to a component a child component might trigger something in the parent component. Imagine a parent component defining an observable like this

users$ = this.http.get(...);

When the user$ gets passed to a child component which then subscribes to it

this.user$.subscribe(u => this.user = u);

The child triggers (unknowingly / unwanted) HTTP requests

Same is valid for service calls. Instead of

filteredUsers$ = this.fooService.filterUsers(this.users$);

Better do

filteredUsers$ = this.users$.pipe(switchMap(users => this.fooService.filterUsers(users)));

Performance issues in Angular

Debugging Performance Problems in Angular:

Add debug() to html template
a. Log something like ‘..rendering..’
If too many renderings happen (some might happen) => Add Breakpoint
Go down the StackTrace and look for “OnInvokeTask” => Add Breakpoint
Take a look at the “task”-Property it might contain some infos about the function which lead to the re-rendering (e.g.: see callbackFun)
???
Profit