TransferState for data sharing in Angular - Mini Project: Build & Apply

Using TransferState for Data Sharing in Angular

📖 Scenario: You are building an Angular app that fetches user profile data from a server. To improve performance and avoid fetching the same data twice, you want to share the fetched data between the server and client using Angular's TransferState service.

🎯 Goal: Build a simple Angular standalone component that fetches user data, stores it in TransferState on the server, and reads it from TransferState on the client to avoid duplicate HTTP calls.

📋 What You'll Learn

Create a user data object with exact properties

Create a TransferState key for storing user data

Use TransferState to save and retrieve user data

Display user name in the component template

💡 Why This Matters

🌍 Real World

TransferState helps Angular apps avoid duplicate data fetching by sharing data fetched on the server with the client, improving load speed and user experience.

💼 Career

Understanding TransferState is important for Angular developers working on server-side rendering and performance optimization.

1

DATA SETUP: Create user data object

Create a constant called userData with an object containing id: 1, name: 'Alice', and email: '[e-mail]'.

Angular

# Your code here

Need a hint?

Use const userData = { id: 1, name: 'Alice', email: '[e-mail]' };

2

CONFIGURATION: Create TransferState key

Create a constant called USER_KEY using makeStateKey<typeof userData>('user-data') to define the TransferState key.

Angular

const userData = { id: 1, name: 'Alice', email: '[e-mail]' };
# Your code here

Need a hint?

Use makeStateKey<typeof userData>('user-data') to create the key.

3

CORE LOGIC: Use TransferState to save and retrieve data

In a standalone Angular component called UserProfileComponent, inject TransferState and PLATFORM_ID. In the constructor, check if the platform is server using isPlatformServer. If server, set userData in TransferState with USER_KEY. If client, get userData from TransferState using USER_KEY. Store the result in a public property called user.

Angular

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

const userData = { id: 1, name: 'Alice', email: '[e-mail]' };
const USER_KEY = makeStateKey('user-data');

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `User: {{ user.name }}`
})
export class UserProfileComponent {
  user: typeof userData;

  constructor() {
    // Your code here
  }
}

Need a hint?

Use inject to get TransferState and PLATFORM_ID. Use isPlatformServer to check platform. Use set and get methods of TransferState.

4

COMPLETION: Add component to module or bootstrap

Add UserProfileComponent to the bootstrap array in your main Angular module or include it in your app template to display the user name.

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { UserProfileComponent } from './user-profile.component';

// Your code here

Need a hint?

Use bootstrapApplication(UserProfileComponent) to start the app with this component.