Skip to content

Commit b144740

Browse files
committed
chore: update README.md
1 parent 034be4b commit b144740

File tree

1 file changed

+49
-14
lines changed

1 file changed

+49
-14
lines changed

README.md

Lines changed: 49 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,61 @@
1212

1313
## Table of Contents
1414

15-
- [Angular Compatibility](#angular-compatibility)
15+
- [Compatibility with Angular Versions](#compatibility-with-angular-versions)
1616
- [Install](#📦-install)
1717
- [Usage](#🔨-usage)
1818
- [API](#api)
1919
- [SelectSnapshot](#selectsnapshot)
2020
- [ViewSelectSnapshot](#viewselectsnapshot)
2121
- [Summary](#summary)
2222

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>
2659

2760
## 📦 Install
2861

29-
To install `@ngxs-labs/select-snapshot` run the following command:
62+
To install `@ngxs-labs/select-snapshot`, run the following command:
3063

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
3570
```
3671

3772
## 🔨 Usage
@@ -51,11 +86,11 @@ export class AppModule {}
5186

5287
## API
5388

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.
5590

5691
### SelectSnapshot
5792

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:
5994

6095
```ts
6196
import { SelectSnapshot } from '@ngxs-labs/select-snapshot';
@@ -78,7 +113,7 @@ export class TokenInterceptor {
78113
}
79114
```
80115

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`.
82117

83118
### ViewSelectSnapshot
84119

@@ -100,7 +135,7 @@ export class ProgressComponent {
100135
}
101136
```
102137

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:
104139

105140
```ts
106141
@Component({
@@ -118,7 +153,7 @@ export class ProgressComponent {
118153
}
119154
```
120155

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).
122157

123158
## Summary
124159

0 commit comments

Comments
 (0)