TransferState for data sharing in Angular

Introduction

TransferState helps share data between server and client in Angular apps. It avoids fetching the same data twice.

When you want to send data fetched on the server to the client without extra requests.

When building Angular Universal apps that render on the server and then continue on the client.

When you want faster page loads by reusing server data on the client side.

When you want to reduce API calls and improve performance in server-side rendered apps.

Syntax

Angular

import { TransferState, makeStateKey } from '@angular/platform-browser';

const KEY = makeStateKey<string>('myDataKey');

// To set data
this.transferState.set(KEY, data);

// To get data
const data = this.transferState.get(KEY, defaultValue);

makeStateKey creates a unique key to store and retrieve data.

Use set on the server to save data, and get on the client to read it.

Examples

Store the string 'Alice' under the key 'user'.

Angular

const USER_KEY = makeStateKey<string>('user');
this.transferState.set(USER_KEY, 'Alice');

Retrieve the 'user' data or return 'Guest' if not found.

Angular

const USER_KEY = makeStateKey<string>('user');
const user = this.transferState.get(USER_KEY, 'Guest');

Store and retrieve a number value using TransferState.

Angular

const COUNT_KEY = makeStateKey<number>('count');
this.transferState.set(COUNT_KEY, 42);
const count = this.transferState.get(COUNT_KEY, 0);

Sample Program

This Angular component uses TransferState to share a string between server and client. On the server, it sets the data. On the client, it reads the data and shows it.

Angular

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const DATA_KEY = makeStateKey<string>('data');

@Component({
  selector: 'app-root',
  template: `<h1>{{ data }}</h1>`
})
export class AppComponent {
  data = '';

  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    if (isPlatformServer(this.platformId)) {
      // On server: fetch data and store it
      const serverData = 'Hello from server!';
      this.transferState.set(DATA_KEY, serverData);
      this.data = serverData;
    } else {
      // On client: get data from TransferState
      this.data = this.transferState.get(DATA_KEY, 'No data');
      // Remove data after reading to avoid reuse
      this.transferState.remove(DATA_KEY);
    }
  }
}

Important Notes

Always remove data from TransferState on the client after reading to prevent stale data.

TransferState works only with serializable data (like strings, numbers, objects).

Use it mainly in Angular Universal apps where server-side rendering is involved.

Summary

TransferState shares data between server and client to avoid duplicate fetching.

Use makeStateKey to create keys for storing and retrieving data.

Set data on the server and get it on the client for faster, efficient apps.