TransferState Utils
A small utility to set (on server) and get (on browser) TransferState values.
Getting started
Install the package with:
npm install transfer-state-utilsUsage
getOrSet()
getOrSet<T>(key: string, value: T): T | nullParameters
-
key- Name of the key -
value- The server side value 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:
// 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 component to set the value in TransferState when run on the server, and get the value when run on the browser:
@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 TransferState
// When rendered on the client, get the value from TransferState
this.message = getOrSet('message', messageFromServer);
}
}