You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+49-14Lines changed: 49 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,26 +12,61 @@
12
12
13
13
## Table of Contents
14
14
15
-
-[Angular Compatibility](#angular-compatibility)
15
+
-[Compatibility with Angular Versions](#compatibility-with-angular-versions)
16
16
-[Install](#📦-install)
17
17
-[Usage](#🔨-usage)
18
18
-[API](#api)
19
19
-[SelectSnapshot](#selectsnapshot)
20
20
-[ViewSelectSnapshot](#viewselectsnapshot)
21
21
-[Summary](#summary)
22
22
23
-
## Angular Compatibility
24
-
25
-
`@ngxs-labs/select-snapshot@3+` is compatible only with Angular starting from 10.0.5 version.
23
+
## Compatibility with Angular Versions
24
+
25
+
<table>
26
+
<thead>
27
+
<tr>
28
+
<th>@ngxs-labs/select-snapshot</th>
29
+
<th>Angular</th>
30
+
</tr>
31
+
</thead>
32
+
<tbody>
33
+
<tr>
34
+
<td>
35
+
3.x
36
+
</td>
37
+
<td>
38
+
>= 10.0.5 < 13
39
+
</td>
40
+
</tr>
41
+
<tr>
42
+
<td>
43
+
4.x
44
+
</td>
45
+
<td>
46
+
>= 13 < 15
47
+
</td>
48
+
</tr>
49
+
<tr>
50
+
<td>
51
+
5.x
52
+
</td>
53
+
<td>
54
+
>= 15
55
+
</td>
56
+
</tr>
57
+
</tbody>
58
+
</table>
26
59
27
60
## 📦 Install
28
61
29
-
To install `@ngxs-labs/select-snapshot` run the following command:
62
+
To install `@ngxs-labs/select-snapshot`, run the following command:
30
63
31
-
```console
32
-
npm install @ngxs-labs/select-snapshot
33
-
# of if you use yarn
34
-
yarn add @ngxs-labs/select-snapshot
64
+
```sh
65
+
$ npm install @ngxs-labs/select-snapshot
66
+
# Or if you're using yarn
67
+
$ yarn add @ngxs-labs/select-snapshot
68
+
# Or if you're using pnpm
69
+
$ pnpm install @ngxs-labs/select-snapshot
35
70
```
36
71
37
72
## 🔨 Usage
@@ -51,11 +86,11 @@ export class AppModule {}
51
86
52
87
## API
53
88
54
-
There are 2 decorators exposed publicly. These are `@SelectSnapshot` and `@ViewSelectSnapshot`. They can be used to decorate class properties.
89
+
`@ngxs-labs/select-snapshot` exposes `@SelectSnapshot` and `@ViewSelectSnapshot` decorators, they might be used to decorate class properties.
55
90
56
91
### SelectSnapshot
57
92
58
-
`@SelectSnapshot` decorator behaves the same as the `@Select` decorator. The only difference is `@SelectSnapshot` decorated property will always return the current state value whereas `@Select`decorated property returns an `Observable`. Let's look at the following example:
93
+
`@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:
@@ -78,7 +113,7 @@ export class TokenInterceptor {
78
113
}
79
114
```
80
115
81
-
As you may notice we don't have to inject the `Store`class and invoke the `selectSnapshot` on it.
116
+
We don't have to inject the `Store` and call the `selectSnapshot`.
82
117
83
118
### ViewSelectSnapshot
84
119
@@ -100,7 +135,7 @@ export class ProgressComponent {
100
135
}
101
136
```
102
137
103
-
Why? Because if the `progress` state gets updated then Angular has to check that view and update it. This view will not get updated because it's marked as `OnPush`, which means it's constantly in `CheckOnce` state. How to make the above example work?
138
+
The `@ViewSelectSnapshot` decorator will force the template to be updated whenever the `progress` property is changed on the state:
104
139
105
140
```ts
106
141
@Component({
@@ -118,7 +153,7 @@ export class ProgressComponent {
118
153
}
119
154
```
120
155
121
-
How does it work? The `@ViewSelectSnapshot` decorator calls `markForCheck()`under the hood when the `progress` state gets updated.
156
+
The decorator internally subscribes to `store.select` with the provided selector and calls `markForCheck()`whenever the state is updated (and the selector emits).
0 commit comments