TransferState for data sharing in Angular - Step-by-Step Execution

Concept Flow - TransferState for data sharing

Server renders page

↓

Fetch data on server

↓

Store data in TransferState

↓

Send HTML + state to client

↓

Client bootstraps Angular

↓

Check TransferState for data

↓

Use data

↓

Render component with data

Shows how Angular uses TransferState to share data fetched on the server with the client to avoid duplicate requests.

Execution Sample

Angular

constructor(private transferState: TransferState) {
  const data = this.transferState.get(DATA_KEY, null);
  if (data !== null) {
    this.data = data;
  } else {
    fetchDataFromApi().then(d => this.data = d);
  }
}

This code checks if data exists in TransferState; if yes, it uses it, else it fetches from API.

Execution Table

Step	Action	TransferState.get(DATA_KEY)	Data Source	Component Data
1	Server fetches data	null (server side, sets data)	API call	Data stored in TransferState
2	Server sends HTML + state	data stored	N/A	N/A
3	Client bootstraps	data present	TransferState	Data assigned from TransferState
4	Component renders	data present	TransferState	Data used in template
5	If no data in TransferState	null	API call	Data assigned after fetch
6	Component renders with fetched data	null	API call	Data used in template

💡 Execution stops after component has data from TransferState or after fetching data if TransferState is empty.

Variable Tracker

Variable	Start	After Server Fetch	After Client Bootstrap	Final
transferState.get(DATA_KEY)	null	data object	data object	data object
data	undefined	undefined	data object	data object

Key Moments - 2 Insights

Why does the client check TransferState before fetching data?

Because TransferState already has the data fetched on the server, so the client can use it directly and avoid an extra API call, as shown in execution_table step 3.

What happens if TransferState has no data on the client?

The client fetches the data from the API again, as shown in execution_table steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the client assign data from TransferState?

A Step 5

B Step 1

C Step 3

D Step 6

💡 Hint

Check the 'Component Data' column at step 3 in the execution_table.

According to variable_tracker, what is the value of 'data' after client bootstrap?

A undefined

B data object

C null

D empty string

💡 Hint

Look at the 'data' row under 'After Client Bootstrap' in variable_tracker.

If TransferState is empty on the client, what changes in the execution_table?

A Client fetches data from API (steps 5 and 6 happen)

B Server fetches data again

C Client uses TransferState data anyway

D Component renders without data

💡 Hint

See execution_table steps 5 and 6 for the case when TransferState.get returns null.

Concept Snapshot

TransferState shares data fetched on server with client.
Server stores data in TransferState before sending HTML.
Client reads TransferState to avoid duplicate API calls.
If no data in TransferState, client fetches data normally.
Use TransferState.get(key, default) to read data.
Helps improve performance and user experience.

Full Transcript

TransferState in Angular helps share data fetched on the server with the client. When the server renders a page, it fetches data and stores it in TransferState. This data is sent along with the HTML to the client. When the Angular app boots on the client, it checks TransferState for the data. If found, it uses this data directly, avoiding another API call. If not found, it fetches the data from the API as usual. This process improves performance by preventing duplicate data fetching. The example code shows checking TransferState and conditionally fetching data. The execution table traces these steps from server fetch to client rendering. Variable tracking shows how data moves from undefined to assigned. Key moments clarify why the client checks TransferState and what happens if data is missing. The visual quiz tests understanding of these steps. Overall, TransferState is a simple way to share server-fetched data with the client in Angular apps.