Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f8542ec

Browse files
edbznedbzn
authored
Merge pull request #1558 from KevTale/add-standalone-components-examples-and-fix-typos
docs(template): add setup example with standalone cmp and fix typos
2 parents 024f5fa + 21b8525 commit f8542ec

File tree

5 files changed

+59
-95
lines changed

5 files changed

+59
-95
lines changed

‎apps/docs/docs/cdk/render-strategies/strategies/basic-strategies.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,12 +158,12 @@ class Component {
158158
### Template
159159

160160
```ts
161-
import { LetModule } from '@rx-angular/template/let';
162-
import { ForModule } from '@rx-angular/template/for';
163-
import { PushModule } from '@rx-angular/template/push';
161+
import { LetDirective } from '@rx-angular/template/let';
162+
import { PushPipe } from '@rx-angular/template/push';
163+
import { RxFor } from '@rx-angular/template/for';
164164

165165
@Module({
166-
imports: [LetModule, ForModule, PushModule],
166+
imports: [LetDirective, PushPipe, RxFor],
167167
})
168168
class Module {}
169169
```

‎apps/docs/docs/template/api/let-directive.md

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -115,28 +115,14 @@ n/a
115115

116116
## Setup
117117

118-
The `LetModule` can be imported as following:
119-
120-
Module based setup:
121-
122-
```ts
123-
import { LetModule } from '@rx-angular/template/let';
124-
125-
@NgModule({
126-
imports: [LetModule],
127-
// ...
128-
})
129-
export class AnyModule {}
130-
```
131-
132-
Standalone component setup:
118+
The `LetDirective` can be imported as following:
133119

134120
```ts
135-
import { LetModule } from '@rx-angular/template/let';
121+
import { LetDirective } from '@rx-angular/template/let';
136122

137123
@Component({
138124
standalone: true,
139-
imports: [LetModule],
125+
imports: [LetDirective],
140126
template: `...`,
141127
})
142128
export class AnyComponent {}
@@ -237,7 +223,7 @@ e.g. from the complete template back to the value display
237223

238224
```typescript
239225
@Component({
240-
selector: 'any-component',
226+
selector: 'app-root',
241227
template: `
242228
<button (click)="nextTrigger$.next()">show value</button>
243229
<ng-container
@@ -263,7 +249,7 @@ e.g. from the complete template back to the value display
263249

264250
```typescript
265251
@Component({
266-
selector: 'any-component',
252+
selector: 'app-root',
267253
template: `
268254
<ng-container *rxLet="num$; let n; error: error; errorTrg: errorTrigger$">
269255
{{ n }}
@@ -286,7 +272,7 @@ e.g. from the complete template back to the value display
286272

287273
```typescript
288274
@Component({
289-
selector: 'any-component',
275+
selector: 'app-root',
290276
template: `
291277
<ng-container
292278
*rxLet="num$; let n; complete: complete; completeTrg: completeTrigger$"
@@ -311,7 +297,7 @@ e.g. from the complete template back to the value display
311297

312298
```typescript
313299
@Component({
314-
selector: 'any-component',
300+
selector: 'app-root',
315301
template: `
316302
<input (input)="search($event.target.value)" />
317303
<ng-container
@@ -348,7 +334,7 @@ in a convenient way.
348334

349335
```typescript
350336
@Component({
351-
selector: 'any-component',
337+
selector: 'app-root',
352338
template: `
353339
<input (input)="search($event.target.value)" />
354340
<ng-container
@@ -392,7 +378,9 @@ The default value for strategy is [`normal`](../../cdk/render-strategies/strateg
392378
```
393379

394380
```ts
395-
@Component()
381+
@Component({
382+
/**/
383+
})
396384
export class AppComponent {
397385
strategy = 'low';
398386
strategy$ = of('immediate');
@@ -447,9 +435,9 @@ The result of the `renderCallback` will contain the currently rendered value of
447435
@Component({
448436
selector: 'app-root',
449437
template: `
450-
<ng-container *rxLet="num$; let n; renderCallback: valueRendered;">
451-
{{ n }}
452-
</ng-container>
438+
<ng-container *rxLet="num$; let n; renderCallback: valueRendered;">
439+
{{ n }}
440+
</ng-container>
453441
`
454442
})
455443
export class AppComponent {
@@ -477,7 +465,7 @@ For more details read about [NgZone optimizations](../performance-issues/ngzone-
477465

478466
```ts
479467
@Component({
480-
selector: 'any-component>',
468+
selector: 'app-root',
481469
template: `
482470
<div
483471
*rxLet="bgColor$; let bgColor; patchZone: false"

‎apps/docs/docs/template/api/rx-for-directive.md

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -107,28 +107,14 @@ The following context variables are available for each template:
107107

108108
## Setup
109109

110-
The `ForModule` can be imported as following:
111-
112-
Module based setup:
113-
114-
```
115-
import { ForModule } from "@rx-angular/template/for";
116-
117-
@NgModule({
118-
imports: [ ForModule ],
119-
// ...
120-
})
121-
export class AnyModule {}
122-
```
123-
124-
Standalone component setup:
110+
The `RxFor` can be imported as following:
125111

126112
```
127-
import { ForModule } from "@rx-angular/template/for";
113+
import { RxFor } from "@rx-angular/template/for";
128114
129-
@NgComponent({
115+
@Component({
130116
standalone: true,
131-
imports: [ ForModule ],
117+
imports: [RxFor],
132118
template: `...`
133119
})
134120
export class AnyComponent {}
@@ -151,11 +137,11 @@ export class AnyComponent {}
151137
### Simple example using `*rxFor` with `Observable` values
152138

153139
```ts
154-
@NgComponent({
140+
@Component({
155141
template: `
156-
<ul>
157-
<li *rxFor="let item of items$; trackBy: trackItem">{{ item }}</li>
158-
</ul>
142+
<ul>
143+
<li *rxFor="let item of items$; trackBy: trackItem">{{ item }}</li>
144+
</ul>
159145
`
160146
})
161147
export class AnyComponent {
@@ -173,11 +159,11 @@ export class AnyComponent {
173159
> As `rxFor` accepts also static values it can serve as a drop in replacement with an easy find and replace refactoring.
174160
175161
```typescript
176-
@NgComponent({
162+
@Component({
177163
template: `
178-
<ul>
179-
<li *rxFor="let item of items; trackBy: trackItem">{{ item }}</li>
180-
</ul>
164+
<ul>
165+
<li *rxFor="let item of items; trackBy: trackItem">{{ item }}</li>
166+
</ul>
181167
`
182168
})
183169
export class AnyComponent {
@@ -195,12 +181,12 @@ export class AnyComponent {
195181
> As `rxFor` accepts also static values it can serve as a drop in replacement with an easy find and replace refacturing.
196182
197183
```typescript
198-
@NgComponent({
184+
@Component({
199185
template: `
200186
<ul>
201187
<li *rxFor="let item of items; trackBy: 'id'">{{ item }}</li>
202188
</ul>
203-
`,
189+
`,
204190
})
205191
export class AnyComponent {}
206192
```
@@ -272,7 +258,9 @@ The default value for strategy is [`normal`](../../cdk/render-strategies/strateg
272258
```
273259

274260
```ts
275-
@Component()
261+
@Component({
262+
/**/
263+
})
276264
export class AppComponent {
277265
strategy = 'low';
278266
strategy$ = of('immediate');
@@ -303,7 +291,7 @@ Imagine the following situation:
303291
template: ` <ng-content select="app-list-item"></ng-content>`,
304292
})
305293
export class AppListComponent {
306-
@ContentChildren(AppListItemComponent)
294+
@ContentChildren(AppListItemComponent);
307295
appListItems: QueryList<AppListItemComponent>;
308296
}
309297
```
@@ -436,7 +424,7 @@ For more details read about [NgZone optimizations](../performance-issues/ngzone-
436424

437425
```ts
438426
@Component({
439-
selector: 'any-component>',
427+
selector: 'app-root',
440428
template: `
441429
<div
442430
*rxFor="let bgColor; in: bgColor$; patchZone: false"

‎apps/docs/docs/template/api/rx-if-directive.md

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -103,28 +103,14 @@ n/a
103103

104104
## Setup
105105

106-
The `IfModule` can be imported as following:
107-
108-
Module based setup:
109-
110-
```ts
111-
import { IfModule } from '@rx-angular/template/if';
112-
113-
@NgModule({
114-
imports: [IfModule],
115-
// ...
116-
})
117-
export class AnyModule {}
118-
```
119-
120-
Standalone component setup:
106+
The `RxIf` can be imported as following:
121107

122108
```ts
123-
import { IfModule } from '@rx-angular/template/if';
109+
import { RxIf } from '@rx-angular/template/if';
124110

125111
@Component({
126112
standalone: true,
127-
imports: [IfModule],
113+
imports: [RxIf],
128114
template: `...`,
129115
})
130116
export class AnyComponent {}
@@ -287,7 +273,7 @@ e.g. from the complete template back to the value display
287273

288274
```typescript
289275
@Component({
290-
selector: 'any-component',
276+
selector: 'app-root',
291277
template: `
292278
<button (click)="nextTrigger$.next()">show value</button>
293279
<ng-container *rxIf="show; complete: complete; nextTrg: nextTrigger$">
@@ -309,7 +295,7 @@ e.g. from the complete template back to the value display
309295

310296
```typescript
311297
@Component({
312-
selector: 'any-component',
298+
selector: 'app-root',
313299
template: `
314300
<ng-container *rxIf="show$; let n; error: error; errorTrg: errorTrigger$">
315301
<item></item>
@@ -330,7 +316,7 @@ e.g. from the complete template back to the value display
330316

331317
```typescript
332318
@Component({
333-
selector: 'any-component',
319+
selector: 'app-root',
334320
template: `
335321
<ng-container
336322
*rxIf="show$; complete: complete; completeTrg: completeTrigger$"
@@ -353,7 +339,7 @@ e.g. from the complete template back to the value display
353339

354340
```typescript
355341
@Component({
356-
selector: 'any-component',
342+
selector: 'app-root',
357343
template: `
358344
<input (input)="search($event.target.value)" />
359345
<ng-container
@@ -384,7 +370,7 @@ in a convenient way.
384370

385371
```typescript
386372
@Component({
387-
selector: 'any-component',
373+
selector: 'app-root',
388374
template: `
389375
<input (input)="search($event.target.value)" />
390376
<ng-container *rxIf="show$; suspense: suspense; contextTrg: contextTrg$">
@@ -504,7 +490,7 @@ For more details read about [NgZone optimizations](../performance-issues/ngzone-
504490

505491
```ts
506492
@Component({
507-
selector: 'any-component',
493+
selector: 'app-root',
508494
template: `
509495
<div *rxIf="enabled$; patchZone: false" (drag)="itemDrag($event)"></div>
510496
`,

‎libs/template/README.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,21 @@ nx migrate @rx-angular/template
7070

7171
## Basic setup
7272

73-
You can import each feature module individually.
73+
You can import each feature individually.
7474

7575
```typescript
76-
import { LetModule } from '@rx-angular/template/let';
77-
import { ForModule } from '@rx-angular/template/for';
78-
import { PushModule } from '@rx-angular/template/push';
79-
import { UnpatchModule } from '@rx-angular/template/unpatch';
80-
81-
@NgModule({
82-
declarations: [...],
83-
imports: [ForModule, LetModule, PushModule, UnpatchModule],
76+
import { LetDirective } from '@rx-angular/template/let';
77+
import { RxFor } from '@rx-angular/template/for';
78+
import { RxIf } from '@rx-angular/template/if';
79+
import { PushPipe } from '@rx-angular/template/push';
80+
import { UnpatchDirective } from '@rx-angular/template/unpatch';
81+
82+
@Component({
83+
standalone: true,
84+
imports: [LetDirective, RxFor, RxIf, PushPipe, UnpatchDirective],
85+
template: `...`,
8486
})
85-
export class MyModule {}
87+
export class AnyComponent {}
8688
```
8789

8890
## Version Compatibility

0 commit comments

Comments
 (0)