10 | [ ] Regression (a behavior that used to work and stopped working in a new release)
11 | [ ] Bug report
12 | [ ] Performance issue
13 | [ ] Feature request
14 | [ ] Documentation issue or request
15 | [ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
16 | [ ] Other... Please describe:
17 |
46 | Libs:
47 | - @angular/core version: X.Y.Z
48 | - @ngxs/store version: X.Y.Z
49 |
50 |
51 | Browser:
52 | - [ ] Chrome (desktop) version XX
53 | - [ ] Chrome (Android) version XX
54 | - [ ] Chrome (iOS) version XX
55 | - [ ] Firefox version XX
56 | - [ ] Safari (desktop) version XX
57 | - [ ] Safari (iOS) version XX
58 | - [ ] IE version XX
59 | - [ ] Edge version XX
60 |
61 | For Tooling issues:
62 | - Node version: XX
63 | - Platform:
64 |
65 | Others:
66 |
67 |
2 | 
3 |
| @ngxs-labs/select-snapshot | 29 |Angular | 30 |
|---|---|
| 35 | 3.x 36 | | 37 |38 | >= 10.0.5 < 13 39 | | 40 |
| 43 | 4.x 44 | | 45 |46 | >= 13 < 15 47 | | 48 |
| 51 | 5.x 52 | | 53 |54 | >= 15 55 | | 56 |
137 |
138 |
139 | `,
140 | changeDetection: ChangeDetectionStrategy.OnPush,
141 | })
142 | export class ProgressComponent {
143 | // 🚫 Do not use `SelectSnapshot` since `progress` is used in the template.
144 | @SelectSnapshot(ProgressState.getProgress) progress: number;
145 | }
146 | ```
147 |
148 | The `@ViewSelectSnapshot` decorator will force the template to be updated whenever the `progress` property is changed on the state:
149 |
150 | ```ts
151 | @Component({
152 | selector: 'app-progress',
153 | template: `
154 |
155 |
156 |
157 | `,
158 | changeDetection: ChangeDetectionStrategy.OnPush,
159 | })
160 | export class ProgressComponent {
161 | // ✔️ Our view will be checked and updated.
162 | @ViewSelectSnapshot(ProgressState.getProgress) progress: number;
163 | }
164 | ```
165 |
166 | The decorator internally subscribes to `store.select` with the provided selector and calls `markForCheck()` whenever the state is updated (and the selector emits).
167 |
168 | ## Summary
169 |
170 | We 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_).
171 |
--------------------------------------------------------------------------------
/libs/select-snapshot/src/lib/select-snapshot.spec.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Component, Type } from '@angular/core';
3 | import { TestBed } from '@angular/core/testing';
4 | import { State, Action, StateContext, NgxsModule, Store, Selector } from '@ngxs/store';
5 |
6 | import { SelectSnapshot, NgxsSelectSnapshotModule } from '..';
7 |
8 | describe('SelectSnapshot', () => {
9 | interface AnimalsStateModel {
10 | pandas: string[];
11 | }
12 |
13 | type BearsStateModel = string[];
14 |
15 | interface BearsChildrenStateModel {
16 | children: string[];
17 | }
18 |
19 | class AddPanda {
20 | static type = '[Animals] Add panda';
21 | constructor(public name: string) {}
22 | }
23 |
24 | // Used for convenience and avoiding `any` in the selector callbacks
25 | interface RootStateModel {
26 | animals: {
27 | pandas: string[];
28 | bears: string[] & {
29 | bearsChildren: {
30 | children: string[];
31 | };
32 | };
33 | };
34 | }
35 |
36 | @State