\n\n---\n\n> Flexibile decorator, an alternative for the `@Select` but selects a snapshot of the state\n\n\n[](https://badge.fury.io/js/%40ngxs-labs%2Fselect-snapshot)\n[](https://github.com/ngxs-labs/select-snapshot/blob/master/LICENSE)\n\n## Table of Contents\n\n- [Compatibility with Angular Versions](#compatibility-with-angular-versions)\n- [Install](#📦-install)\n- [Usage](#🔨-usage)\n- [API](#api)\n - [SelectSnapshot](#selectsnapshot)\n - [ViewSelectSnapshot](#viewselectsnapshot)\n- [Summary](#summary)\n\n## Compatibility with Angular Versions\n\n
\n \n
\n
@ngxs-labs/select-snapshot
\n
Angular
\n
\n \n \n
\n
\n 3.x\n
\n
\n >= 10.0.5 < 13\n
\n
\n
\n
\n 4.x\n
\n
\n >= 13 < 15\n
\n
\n
\n
\n 5.x\n
\n
\n >= 15\n
\n
\n \n
\n\n## 📦 Install\n\nTo install `@ngxs-labs/select-snapshot`, run the following command:\n\n```sh\n$ npm install @ngxs-labs/select-snapshot\n# Or if you're using yarn\n$ yarn add @ngxs-labs/select-snapshot\n# Or if you're using pnpm\n$ pnpm install @ngxs-labs/select-snapshot\n```\n\n## 🔨 Usage\n\nImport the `NgxsSelectSnapshotModule` into your root application module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { NgxsModule } from '@ngxs/store';\nimport { NgxsSelectSnapshotModule } from '@ngxs-labs/select-snapshot';\n\n@NgModule({\n imports: [NgxsModule.forRoot(states), NgxsSelectSnapshotModule.forRoot()],\n})\nexport class AppModule {}\n```\n\n## API\n\n`@ngxs-labs/select-snapshot` exposes `@SelectSnapshot` and `@ViewSelectSnapshot` decorators, they might be used to decorate class properties.\n\n### SelectSnapshot\n\n`@SelectSnapshot` decorator should be used similarly to the `@Select` decorator. It will decorate the property to always return the selected value, whereas `@Select` decorates properties to return observable. Given the following example:\n\n```ts\nimport { SelectSnapshot } from '@ngxs-labs/select-snapshot';\n\n@Injectable()\nexport class TokenInterceptor {\n @SelectSnapshot(AuthState.token) token: string | null;\n\n intercept(req: HttpRequest, next: HttpHandler): Observable> {\n if (this.token) {\n req = req.clone({\n setHeaders: {\n Authorization: `Bearer ${this.token}`,\n },\n });\n }\n\n return next.handle(req);\n }\n}\n```\n\nWe don't have to inject the `Store` and call the `selectSnapshot`.\n\n### ViewSelectSnapshot\n\n`@ViewSelectSnapshot` is a decorator that should decorate class properties that are used in templates (e.g. _renderable_ or passed as _bindings_). Given the following example:\n\n```ts\n@Component({\n selector: 'app-progress',\n template: `\n
\n \n
\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressComponent {\n // 🚫 Do not use `SelectSnapshot` since `progress` is used in the template.\n @SelectSnapshot(ProgressState.getProgress) progress: number;\n}\n```\n\nThe `@ViewSelectSnapshot` decorator will force the template to be updated whenever the `progress` property is changed on the state:\n\n```ts\n@Component({\n selector: 'app-progress',\n template: `\n
\n \n
\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgressComponent {\n // ✔️ Our view will be checked and updated.\n @ViewSelectSnapshot(ProgressState.getProgress) progress: number;\n}\n```\n\nThe decorator internally subscribes to `store.select` with the provided selector and calls `markForCheck()` whenever the state is updated (and the selector emits).\n\n## Summary\n\nWe have looked at several examples of using both decorators. Consider to use the `@SelectSnapshot` if decorated properties are not used in templates! Consider to use the `@ViewSelectSnapshot` if decorated properties are used in templates (e.g. _renderable_ or passed as _bindings_).\n","readmeFilename":"README.md"}
![](\"https://raw.githubusercontent.com/ngxs-labs/emitter/master/docs/assets/logo.png\"){kind=logo}