DEV Community: Tomas

You don't need to care about unsubscribing

Tomas — Tue, 04 Jun 2019 09:44:10 +0000

Problem:
Not unsubscribing to observables can cause memory leaks. Unsubscribing is fairly straight forward but could easily be forgotten and cause a fair amount of boilerplate code.

Solution:
By using Angulars builtin async pipe, we don't need to subscribe or unsubscribe, it's handle automatically for us by the framework.

Before / Untutored:

Component

export class AppComponent implements OnInit, OnDestroy {

  recipe;
  componentDestroyed$: Subject<boolean> = new Subject();

  constructor(private recipesService: RecipesService) {  }

  ngOnInit() {
    this.recipesService.get().pipe(takeUntil(this.componentDestroyed$)).subscribe(data => this.recipe = data);
  }

  ngOnDestroy() {
    this.componentDestroyed$.next();
    this.componentDestroyed$.complete();
  }
}

Template

{{ recipe }}

After:

Component

export class AppComponent implements OnInit {

  recipeWithAsyncPipe$;

  constructor(private recipesService: RecipesService) {  }

  ngOnInit() {
    this.recipeWithAsyncPipe$ = this.recipesService.get();
  }
}

Template

{{ recipe$ | async }}

Try it yourself:
https://stackblitz.com/edit/thllbrg-angular-fika-4

Official docs:
https://angular.io/guide/observables-in-angular#async-pipe

Protect your templates without tedious *ngIfs

Tomas — Fri, 31 May 2019 08:44:24 +0000

Problem:
Properties we use in our templates are sometimes undefined or null, this can cause our templates not to render. We can protect our code by wrapping the potential problem area with an *ngIf, but that quickly becomes cumbersome for longer property paths.

Solution:
By utilizing Angulars safe navigator operator ?., also called the Elvis operator, we can reduce unnecessary checks in our templates, by making sure we only access properties that could be null or undefined via the safe navigator operator.

Before / Untutored:

Component

pastery = {
    name: 'Cinnamon bun',
    ingredients: {
      eggs: null,
      milk: null
    }
}

Template

<h2>Ingredients</h2>

<div *ngIf="pastery.ingredients.eggs">
  {{ pastery.ingredients.eggs.qty.amount }} {{ pastery.ingredients.eggs.qty.unit && pastery.ingredients.eggs.qty.unit.name }} {{ pastery.ingredients.eggs.name }}
</div>

<div *ngIf="pastery.ingredients.milk">
  {{ pastery.ingredients.milk.qty.amount }} {{ pastery.ingredients.milk.qty.unit && pastery.ingredients.milk.qty.unit.name }} {{ pastery.ingredients.milk.name }}
</div>

After:

Component

pastery = {
    name: 'Cinnamon bun',
    ingredients: {
      eggs: null,
      milk: null
    }
}

Template

<h2>Ingredients</h2>

<div>
 {{ pastery.ingredients.eggs?.qty.amount }} {{ pastery.ingredients.eggs?.qty.unit?.name }} {{ pastery.ingredients.eggs?.name }}
</div>

<div>
  {{ pastery.ingredients.milk?.qty.amount }} {{ pastery.ingredients.milk?.qty.unit?.name }} {{ pastery.ingredients.milk?.name }}
</div>

Try it yourself:
https://stackblitz.com/edit/thllbrg-angular-fika-3

Official docs:
https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Declutter your angular template

Tomas — Wed, 29 May 2019 06:48:18 +0000

Problem:
Displaying different messages depending on the number of items in an array can clutter your markup with lots of ngIfs or ngSwitchCases.

Solution:
Utilizing Angular's built in i18nPlural pipe.

Before / Untutored:

Component

count = 0; //0, 1, 2

Template

<span *ngIf="count === 0">You have no cinnamon buns left</span>
<span *ngIf="count === 1">You have one cinnamon bun left</span>
<span *ngIf="count > 1">You have a {{count}} cinnamon buns left</span>

After:

Component

count:number = 0;
bunsLeftMessages = {
   '=0': 'You have no cinnamon buns left',
   '=1': 'You have one cinnamon bun left',
   'other': 'You have # cinnamon buns left'
};

Template

{{ count | i18nPlural:bunsLeftMessages }}

Try it yourself:
https://stackblitz.com/edit/thllbrg-angular-fika-1

Official docs:
https://angular.io/api/common/I18nPluralPipe

Performance tip for rendering large collections in Angular

Tomas — Wed, 29 May 2019 05:39:22 +0000

Problem:
To render collection in Angular we use the built in directive *ngFor which works fine as long as we are just displaying or mutating the collection. A potential problem arise when we re-assign the variable holding the collection. Angular must then destroy all the old DOM-nodes and recreate them, even if only a few elements have changed, for a large collection this can create performance issues.

Solution:
Create a function that returns a unique id for each element in the collection, the function is then passed to the directive TrackedBy which we use together with *ngFor.

Before / Untutored:

Component

items = [
  {title: 'Cinnamon buns'},
  {title: 'Cup cakes'},
  {title: 'Croissants'}
];

update() {
  this.items = [
    {title: 'Cinnamon buns'},
    {title: 'Cup cakes'},
    {title: 'Croissants'},
    {title: 'Macarons'}
  ];
}

Template

<div *ngFor="let item of items">
  <app-item [text]="item.title"></app-item>
</div>

Log

naive - Cinnamon buns initialized
naive - Cup cakes initialized
naive - Croissants initialized
Updated data
naive - Cinnamon buns initialized
naive - Cup cakes initialized
naive - Croissants initialized
naive - Macarons initialized

After:

Component

items = [
  {title: 'Cinnamon buns'},
  {title: 'Cup cakes'},
  {title: 'Croissants'}
];

update() {
  this.items = [
    {title: 'Cinnamon buns'},
    {title: 'Cup cakes'},
    {title: 'Croissants'},
    {title: 'Macarons'}
  ];
}

itemsTrackedBy(index, item) {
  return item.text;
}

Template

<div *ngFor="let item of items; trackBy: itemsTrackedBy">
    <app-item [text]="item.title"></app-item>
</div>

Log

trackedBy - Cinnamon buns initialized
trackedBy - Cup cakes initialized
trackedBy - Croissants initialized
Updated data
trackedBy - Macarons initialized

Try it yourself:
https://stackblitz.com/edit/thllbrg-angular-fika-2

Official docs:
https://angular.io/guide/template-syntax#ngfor-with-trackby

Welcome to the Angular fika-series

Tomas — Mon, 27 May 2019 19:38:14 +0000

This is the introduction post for my serie called "Angular intermediate fikas", the target audience is beginner developers which knows the basics of
Angular and has started working their way to intermediate level.

This is my way to give you tips and tricks that I often get asked about and to highlight different ways to make your code more robust by utilizing built in features in Angular.

These posts aims to be short and consist with a working sample that you can try out during a short fika (coffee-break).