https://github.com/kgajera/transfer-state-utils

Angular utility to set and get values from TransferState
https://github.com/kgajera/transfer-state-utils

Last synced: 2 days ago
JSON representation

Angular utility to set and get values from TransferState

• Host: GitHub
• URL: https://github.com/kgajera/transfer-state-utils
• Owner: kgajera
• Created: 2023-06-26T22:29:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-30T18:01:01.000Z (about 1 year ago)
• Last Synced: 2024-05-01T15:10:56.715Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 193 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TransferState Utils

[![npm version](https://badge.fury.io/js/transfer-state-utils.svg)](https://www.npmjs.com/package/transfer-state-utils)

A small utility to set (on server) and get (on browser) [TransferState](https://angular.io/api/core/TransferState) values.

## Getting started

Install the package with:

```shell

npm install transfer-state-utils

```

## Usage

### getOrSet()

```ts

getOrSet(key: string, value: T): T | null

```

#### Parameters

- `key` - Name of the key

- `value` - Data from server-side to store

#### Example

Let's say you have the following Express route to server-side render your app. It injects a token containing a value passed from Express server:

```ts

// SSR using an Express server from Angular Universal

server.get("*", async (req, res) => {

  res.render(indexHtml, {

    req,

    providers: [

      { provide: APP_BASE_HREF, useValue: req.baseUrl },

      // Inject a value from the server

      // Here we are passing a string, but this could be data from your database or other sources

      { provide: "message", useValue: "Test message from server" },

    ],

  });

});

```

You can use the `getOrSet` function in your app to set the value in the TransferState store when run on the server, and get the value when run on the browser:

```ts

@Component({

  selector: "app-root",

  template: `{{ message }}`,

})

export class AppComponent {

  message: string;

  constructor(

    // Injection token from Express server

    @Optional() @Inject("message") private messageFromServer: string

  ) {

    // When rendered on the server, set the value in the TransferState store

    // When rendered on the client, get the value from the TransferState store

    this.message = getOrSet("message", messageFromServer);

  }

}

```