ngx-firestore-wrapper-kit 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -132
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,139 +1,36 @@
|
|
|
1
1
|
# ngx-firestore-wrapper-kit — Integration Guide
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
.guide-header {
|
|
5
|
-
max-width: 960px;
|
|
6
|
-
margin: 0 auto 1.5rem;
|
|
7
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
8
|
-
line-height: 1.6;
|
|
9
|
-
color: #24292f;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.guide-intro {
|
|
13
|
-
margin: 0 0 1rem;
|
|
14
|
-
color: #57606a;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.guide-requirements {
|
|
18
|
-
background: #fff8e6;
|
|
19
|
-
border-left: 4px solid #d4a72c;
|
|
20
|
-
border-radius: 0 6px 6px 0;
|
|
21
|
-
padding: 0.75rem 1rem;
|
|
22
|
-
margin: 0 0 1.25rem;
|
|
23
|
-
font-size: 0.95rem;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.guide-nav {
|
|
27
|
-
background: #f6f8fa;
|
|
28
|
-
border: 1px solid #d0d7de;
|
|
29
|
-
border-left: 4px solid #0969da;
|
|
30
|
-
border-radius: 8px;
|
|
31
|
-
padding: 1rem 1.25rem;
|
|
32
|
-
margin: 0 0 1.5rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.guide-nav-title {
|
|
36
|
-
margin: 0 0 0.85rem;
|
|
37
|
-
padding-bottom: 0.65rem;
|
|
38
|
-
border-bottom: 1px solid #d8dee4;
|
|
39
|
-
font-size: 0.95rem;
|
|
40
|
-
font-weight: 600;
|
|
41
|
-
color: #24292f;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.guide-nav-grid {
|
|
45
|
-
display: grid;
|
|
46
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
47
|
-
gap: 0.25rem 1rem;
|
|
48
|
-
margin: 0;
|
|
49
|
-
padding: 0;
|
|
50
|
-
list-style: none;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.guide-nav-grid li {
|
|
54
|
-
margin: 0;
|
|
55
|
-
}
|
|
3
|
+
Steps to install, configure, and use this library in an Angular application.
|
|
56
4
|
|
|
57
|
-
|
|
58
|
-
display: block;
|
|
59
|
-
padding: 0.4rem 0.5rem;
|
|
60
|
-
color: #0969da;
|
|
61
|
-
text-decoration: none;
|
|
62
|
-
font-size: 0.9rem;
|
|
63
|
-
border-radius: 4px;
|
|
64
|
-
transition: background 0.15s ease, color 0.15s ease;
|
|
65
|
-
}
|
|
5
|
+
<p style="font-size: 1.15rem; line-height: 1.6;"><strong>Requirements:</strong> Angular ^20.3.0, a Firebase project with Firestore enabled.</p>
|
|
66
6
|
|
|
67
|
-
|
|
68
|
-
color: #0550ae;
|
|
69
|
-
background: #eef6ff;
|
|
70
|
-
}
|
|
7
|
+
<div style="background: #f6f8fa; border: 1px solid #d0d7de; border-left: 4px solid #0969da; border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; font-size: 1rem; line-height: 1.6;">
|
|
71
8
|
|
|
72
|
-
|
|
73
|
-
display: grid;
|
|
74
|
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
75
|
-
gap: 0.2rem 1rem;
|
|
76
|
-
margin: 0.75rem 0 0;
|
|
77
|
-
padding: 0.75rem 0 0;
|
|
78
|
-
border-top: 1px solid #d8dee4;
|
|
79
|
-
list-style: none;
|
|
80
|
-
}
|
|
9
|
+
<p style="font-size: 1.05rem; font-weight: 600; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #d8dee4;">On this page</p>
|
|
81
10
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
11
|
+
<ul style="margin: 0; padding-left: 1.25rem;">
|
|
12
|
+
<li style="margin-bottom: 0.35rem;"><a href="#1-install" style="color: #0969da; text-decoration: none;">1. Install</a></li>
|
|
13
|
+
<li style="margin-bottom: 0.35rem;"><a href="#2-firebase-configuration" style="color: #0969da; text-decoration: none;">2. Firebase configuration</a></li>
|
|
14
|
+
<li style="margin-bottom: 0.35rem;"><a href="#3-register-the-library-in-your-app" style="color: #0969da; text-decoration: none;">3. Register the library in your app</a></li>
|
|
15
|
+
<li style="margin-bottom: 0.35rem;"><a href="#4-usage" style="color: #0969da; text-decoration: none;">4. Usage</a></li>
|
|
16
|
+
<li style="margin-bottom: 0.35rem;"><a href="#5-checklist" style="color: #0969da; text-decoration: none;">5. Checklist</a></li>
|
|
17
|
+
<li style="margin-bottom: 0.35rem;"><a href="#exports-reference" style="color: #0969da; text-decoration: none;">Exports reference</a></li>
|
|
18
|
+
</ul>
|
|
85
19
|
|
|
86
|
-
|
|
87
|
-
display: block;
|
|
88
|
-
padding: 0.35rem 0.5rem;
|
|
89
|
-
font-size: 0.85rem;
|
|
90
|
-
color: #57606a;
|
|
91
|
-
text-decoration: none;
|
|
92
|
-
border-radius: 4px;
|
|
93
|
-
transition: background 0.15s ease, color 0.15s ease;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.guide-nav-sub a:hover {
|
|
97
|
-
color: #0969da;
|
|
98
|
-
background: #eef6ff;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.guide-section {
|
|
102
|
-
scroll-margin-top: 1.5rem;
|
|
103
|
-
}
|
|
104
|
-
</style>
|
|
105
|
-
|
|
106
|
-
<div class="guide-header">
|
|
107
|
-
|
|
108
|
-
<p class="guide-intro">Steps to install, configure, and use this library in an Angular application.</p>
|
|
109
|
-
|
|
110
|
-
<div class="guide-requirements">
|
|
111
|
-
<strong>Requirements:</strong> Angular ^20.3.0, a Firebase project with Firestore enabled.
|
|
112
|
-
</div>
|
|
20
|
+
<p style="font-size: 0.95rem; font-weight: 600; margin: 1rem 0 0.5rem; color: #57606a;">Usage sections</p>
|
|
113
21
|
|
|
114
|
-
<
|
|
115
|
-
<
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<li><a href="#usage">4. Usage</a></li>
|
|
121
|
-
<li><a href="#checklist">5. Checklist</a></li>
|
|
122
|
-
<li><a href="#exports-reference">Exports reference</a></li>
|
|
123
|
-
</ul>
|
|
124
|
-
<ul class="guide-nav-sub">
|
|
125
|
-
<li><a href="#response-shape">↳ Response shape</a></li>
|
|
126
|
-
<li><a href="#listen-to-a-document">↳ Listen to a document</a></li>
|
|
127
|
-
<li><a href="#listen-to-a-collection">↳ Listen to a collection</a></li>
|
|
128
|
-
<li><a href="#path-helpers">↳ Path helpers</a></li>
|
|
129
|
-
</ul>
|
|
130
|
-
</nav>
|
|
22
|
+
<ul style="margin: 0; padding-left: 1.25rem;">
|
|
23
|
+
<li style="margin-bottom: 0.35rem;"><a href="#response-shape" style="color: #0969da; text-decoration: none;">Response shape</a></li>
|
|
24
|
+
<li style="margin-bottom: 0.35rem;"><a href="#listen-to-a-document-real-time" style="color: #0969da; text-decoration: none;">Listen to a document (real-time)</a></li>
|
|
25
|
+
<li style="margin-bottom: 0.35rem;"><a href="#listen-to-a-collection-real-time" style="color: #0969da; text-decoration: none;">Listen to a collection (real-time)</a></li>
|
|
26
|
+
<li style="margin-bottom: 0.35rem;"><a href="#path-helpers" style="color: #0969da; text-decoration: none;">Path helpers</a></li>
|
|
27
|
+
</ul>
|
|
131
28
|
|
|
132
29
|
</div>
|
|
133
30
|
|
|
134
31
|
---
|
|
135
32
|
|
|
136
|
-
<a id="install"
|
|
33
|
+
<a id="1-install"></a>
|
|
137
34
|
|
|
138
35
|
## 1. Install
|
|
139
36
|
|
|
@@ -145,7 +42,7 @@ npm install ngx-firestore-wrapper-kit
|
|
|
145
42
|
|
|
146
43
|
---
|
|
147
44
|
|
|
148
|
-
<a id="firebase-configuration"
|
|
45
|
+
<a id="2-firebase-configuration"></a>
|
|
149
46
|
|
|
150
47
|
## 2. Firebase configuration
|
|
151
48
|
|
|
@@ -171,7 +68,7 @@ Get these values from [Firebase Console](https://console.firebase.google.com/)
|
|
|
171
68
|
|
|
172
69
|
---
|
|
173
70
|
|
|
174
|
-
<a id="register-the-library
|
|
71
|
+
<a id="3-register-the-library-in-your-app"></a>
|
|
175
72
|
|
|
176
73
|
## 3. Register the library in your app
|
|
177
74
|
|
|
@@ -191,7 +88,7 @@ export const appConfig: ApplicationConfig = {
|
|
|
191
88
|
|
|
192
89
|
---
|
|
193
90
|
|
|
194
|
-
<a id="usage"
|
|
91
|
+
<a id="4-usage"></a>
|
|
195
92
|
|
|
196
93
|
## 4. Usage
|
|
197
94
|
|
|
@@ -207,7 +104,7 @@ import {
|
|
|
207
104
|
|
|
208
105
|
Inject `FirestoreDataService` where you need Firestore data. It is `providedIn: 'root'`, so no extra providers are required.
|
|
209
106
|
|
|
210
|
-
<a id="response-shape"
|
|
107
|
+
<a id="response-shape"></a>
|
|
211
108
|
|
|
212
109
|
### Response shape
|
|
213
110
|
|
|
@@ -225,7 +122,7 @@ Always check `success` before using `data`.
|
|
|
225
122
|
|
|
226
123
|
---
|
|
227
124
|
|
|
228
|
-
<a id="listen-to-a-document
|
|
125
|
+
<a id="listen-to-a-document-real-time"></a>
|
|
229
126
|
|
|
230
127
|
### Listen to a document (real-time)
|
|
231
128
|
|
|
@@ -261,7 +158,7 @@ export class BatchJobComponent implements OnInit, OnDestroy {
|
|
|
261
158
|
|
|
262
159
|
---
|
|
263
160
|
|
|
264
|
-
<a id="listen-to-a-collection
|
|
161
|
+
<a id="listen-to-a-collection-real-time"></a>
|
|
265
162
|
|
|
266
163
|
### Listen to a collection (real-time)
|
|
267
164
|
|
|
@@ -297,7 +194,7 @@ export class BatchJobListComponent implements OnInit, OnDestroy {
|
|
|
297
194
|
|
|
298
195
|
---
|
|
299
196
|
|
|
300
|
-
<a id="path-helpers"
|
|
197
|
+
<a id="path-helpers"></a>
|
|
301
198
|
|
|
302
199
|
### Path helpers
|
|
303
200
|
|
|
@@ -321,7 +218,7 @@ this.firestoreData
|
|
|
321
218
|
|
|
322
219
|
---
|
|
323
220
|
|
|
324
|
-
<a id="checklist"
|
|
221
|
+
<a id="5-checklist"></a>
|
|
325
222
|
|
|
326
223
|
## 5. Checklist
|
|
327
224
|
|
|
@@ -334,7 +231,7 @@ this.firestoreData
|
|
|
334
231
|
|
|
335
232
|
---
|
|
336
233
|
|
|
337
|
-
<a id="exports-reference"
|
|
234
|
+
<a id="exports-reference"></a>
|
|
338
235
|
|
|
339
236
|
## Exports reference
|
|
340
237
|
|