TransferState for data sharing in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the TransferState service in an Angular component.

Angular

import { Component } from '@angular/core';
import { [1] } from '@angular/platform-browser';

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

Drag options to blanks, or click blank then click option'

AHttpClient

BTransferState

CRouter

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing HttpClient instead of TransferState

Importing from wrong Angular package

The TransferState service is imported from @angular/platform-browser to share data between server and client.

2fill in blank

medium

Complete the constructor to inject the TransferState service.

Angular

import { Component } from '@angular/core';
import { TransferState } from '@angular/platform-browser';

@Component({
  selector: 'app-data',
  template: '<p>Data component</p>'
})
export class DataComponent {
  constructor(private [1]: TransferState) {}
}

Drag options to blanks, or click blank then click option'

AtransferState

BhttpClient

Crouter

DstateService

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated variable names like httpClient or router

Not using private keyword in constructor

The TransferState service is injected with a variable name, commonly transferState.

3fill in blank

hard

Fix the error in setting a value in TransferState using makeStateKey.

Angular

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

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

export class ExampleComponent {
  constructor(private transferState: TransferState) {}

  saveData() {
    this.transferState.[1](DATA_KEY, 'Hello World');
  }
}

Drag options to blanks, or click blank then click option'

Aput

Badd

Cset

Dstore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'put' or 'add' which do not exist

Using 'store' which is not a method

The correct method to save data in TransferState is set.

4fill in blank

hard

Fill both blanks to retrieve data from TransferState safely.

Angular

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

const USER_KEY = makeStateKey<string>('user');

export class UserComponent {
  constructor(private transferState: TransferState) {}

  getUser() {
    const user = this.transferState.[1](USER_KEY, [2]);
    return user;
  }
}

Drag options to blanks, or click blank then click option'

Aget

Bnull

Cundefined

D''

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' instead of 'get' to retrieve data

Using 'undefined' or empty string as default instead of null

The get method retrieves data from TransferState. The second argument is the default value if no data exists, often null.

5fill in blank

hard

Fill all three blanks to create a TransferState key, set data, and then remove it.

Angular

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

const ITEM_KEY = makeStateKey<string>([1]);

export class ItemComponent {
  constructor(private transferState: TransferState) {}

  updateItem() {
    this.transferState.[2](ITEM_KEY, 'Item Data');
    this.transferState.[3](ITEM_KEY);
  }
}

Drag options to blanks, or click blank then click option'

A'item'

Bset

Cremove

D'data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong string key or missing quotes

Using 'get' instead of 'set' to save data

Using 'clear' instead of 'remove' to delete data

makeStateKey needs a string key like 'item'. Use set to save data and remove to delete it from TransferState.