Skip to content

Commit 550aa59

Browse files
gestjeneajahohoebbelsB
authored
chore(deps): update nx to v21.2.0 & angular to v20.0.3 (#1875)
* chore(deps): update nx to v21.2.0 & angular to v20.0.3 * chore(template): refactor imports for zoneless cd; fix tests * chore(template): fix tests * refactor(template): enhance unpatch directives for zoneless support * refactor(template): fix tests * test: Fix `NG0204: Can't resolve all parameters for TemplateRef: (?, ?, ?) https://cloud.nx.app/runs/RKoxUB9h0R/task/template%3Atest From all I know, it isn't needed to provide core Angular "providers" unless you want to explicitly overwrite it with some custom implementation. * chore: fix test formatting * test(template): fix for signal tests * test(template): fix let directive tests * chore: formatting * chore(docs): fix link * chore: upgrade markdown-link-check --------- Co-authored-by: Enea Jahollari <jahollarienea14@gmail.com> Co-authored-by: Julian Jandl <julian@jandl.wien>
1 parent 876bb64 commit 550aa59

File tree

144 files changed

+6733
-4426
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

144 files changed

+6733
-4426
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,5 @@ Thumbs.db
5555
.nx/cache
5656
.nx/workspace-data
5757
migrations.json
58+
.cursor/rules/nx-rules.mdc
59+
.github/instructions/nx.instructions.md

‎apps/demos/project.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
"name": "demos",
33
"$schema": "../../node_modules/nx/schemas/project-schema.json",
44
"projectType": "application",
5+
"sourceRoot": "apps/demos/src",
6+
"prefix": "rxa",
7+
"tags": ["type:app"],
58
"generators": {
69
"@schematics/angular:component": {
710
"style": "css"
811
}
912
},
10-
"sourceRoot": "apps/demos/src",
11-
"prefix": "rxa",
1213
"targets": {
1314
"build": {
1415
"executor": "@angular-devkit/build-angular:browser-esbuild",
@@ -116,7 +117,8 @@
116117
"buildTarget": "demos:build:development",
117118
"open": true
118119
}
119-
}
120+
},
121+
"continuous": true
120122
},
121123
"extract-i18n": {
122124
"executor": "@angular-devkit/build-angular:extract-i18n",
@@ -131,6 +133,5 @@
131133
},
132134
"outputs": ["{workspaceRoot}/coverage/apps/demos"]
133135
}
134-
},
135-
"tags": ["type:app"]
136+
}
136137
}

‎apps/demos/src/app/app-shell/app-shell-component/app-shell.component.html

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,45 @@
1-
<mat-sidenav-container
2-
class="app-shell-container"
3-
*ngIf="viewState$ | async as state"
4-
>
5-
<mat-sidenav
6-
#drawer
7-
class="app-shell-sidenav"
8-
fixedInViewport
9-
[attr.role]="state.isHandset ? 'dialog' : 'navigation'"
10-
[mode]="state.isHandset ? 'over' : 'side'"
11-
[opened]="state.isHandset === false"
12-
>
13-
<mat-toolbar color="primary">
14-
<ng-content select="[rxaAppShellSidenavTitle]"></ng-content>
15-
</mat-toolbar>
16-
<ng-content select="rxa-side-nav"></ng-content>
17-
</mat-sidenav>
18-
<mat-sidenav-content class="app-shell-content">
19-
<mat-toolbar class="app-shell-header" color="primary">
20-
<button
21-
type="button"
22-
aria-label="Toggle sidenav"
23-
mat-icon-button
24-
(click)="drawer.toggle()"
25-
*ngIf="state.isHandset && !state.showBackButton"
26-
>
27-
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
28-
</button>
29-
<button
30-
type="button"
31-
aria-label="Toggle sidenav"
32-
mat-icon-button
33-
(click)="onBackButtonClick.next($event)"
34-
*ngIf="state.showBackButton"
35-
>
36-
<mat-icon aria-label="navigate back">keyboard_backspace</mat-icon>
37-
</button>
38-
<ng-content select="[rxaAppShellHeaderContent]"></ng-content>
39-
</mat-toolbar>
40-
<div class="container-fluid app-shell-content-container" cdkScrollable>
41-
<ng-content></ng-content>
42-
</div>
43-
</mat-sidenav-content>
44-
</mat-sidenav-container>
1+
@if (viewState$ | async; as state) {
2+
<mat-sidenav-container class="app-shell-container">
3+
<mat-sidenav
4+
#drawer
5+
class="app-shell-sidenav"
6+
fixedInViewport
7+
[attr.role]="state.isHandset ? 'dialog' : 'navigation'"
8+
[mode]="state.isHandset ? 'over' : 'side'"
9+
[opened]="state.isHandset === false"
10+
>
11+
<mat-toolbar color="primary">
12+
<ng-content select="[rxaAppShellSidenavTitle]"></ng-content>
13+
</mat-toolbar>
14+
<ng-content select="rxa-side-nav"></ng-content>
15+
</mat-sidenav>
16+
<mat-sidenav-content class="app-shell-content">
17+
<mat-toolbar class="app-shell-header" color="primary">
18+
@if (state.isHandset && !state.showBackButton) {
19+
<button
20+
type="button"
21+
aria-label="Toggle sidenav"
22+
mat-icon-button
23+
(click)="drawer.toggle()"
24+
>
25+
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
26+
</button>
27+
}
28+
@if (state.showBackButton) {
29+
<button
30+
type="button"
31+
aria-label="Toggle sidenav"
32+
mat-icon-button
33+
(click)="onBackButtonClick.next($event)"
34+
>
35+
<mat-icon aria-label="navigate back">keyboard_backspace</mat-icon>
36+
</button>
37+
}
38+
<ng-content select="[rxaAppShellHeaderContent]"></ng-content>
39+
</mat-toolbar>
40+
<div class="container-fluid app-shell-content-container" cdkScrollable>
41+
<ng-content></ng-content>
42+
</div>
43+
</mat-sidenav-content>
44+
</mat-sidenav-container>
45+
}

‎apps/demos/src/app/app-shell/side-nav/side-nav.component.html

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,11 @@
1717
[rxaAppShellSideNavItemLevel]="level"
1818
class="w-100 text-left"
1919
>
20-
<mat-icon
21-
*ngIf="navItem.icon"
22-
class="mr-1"
23-
[svgIcon]="navItem.icon.svgIcon"
24-
>
25-
{{ navItem.icon.matIcon }}
26-
</mat-icon>
20+
@if (navItem.icon) {
21+
<mat-icon class="mr-1" [svgIcon]="navItem.icon.svgIcon">
22+
{{ navItem.icon.matIcon }}
23+
</mat-icon>
24+
}
2725
{{ navItem.label }}
2826
</a>
2927
</cdk-nested-tree-node>
@@ -39,13 +37,11 @@
3937
cdkTreeNodeToggle
4038
class="w-100 text-left"
4139
>
42-
<mat-icon
43-
*ngIf="navItem.icon"
44-
class="mr-1"
45-
[svgIcon]="navItem.icon.svgIcon"
46-
>
47-
{{ navItem.icon.matIcon }}
48-
</mat-icon>
40+
@if (navItem.icon) {
41+
<mat-icon class="mr-1" [svgIcon]="navItem.icon.svgIcon">
42+
{{ navItem.icon.matIcon }}
43+
</mat-icon>
44+
}
4945
<strong>{{ navItem.label }}</strong>
5046
</a>
5147
<div [hidden]="!treeControl.isExpanded(navItem)">

‎apps/demos/src/app/features/concepts/global-order/global-order.component.ts

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,42 +33,38 @@ import { DataService } from './shared/data.service';
3333
</mat-button-toggle-group>
3434
</div>
3535
<div class="row w-100">
36-
<div
37-
class="col"
38-
*ngIf="
39-
group.value === displayStates.native ||
40-
group.value === displayStates.all
41-
"
42-
>
43-
<rxa-v1-a></rxa-v1-a>
44-
</div>
45-
<div
46-
class="col"
47-
*ngIf="
48-
group.value === displayStates.push ||
49-
group.value === displayStates.all
50-
"
51-
>
52-
<rxa-v2-a></rxa-v2-a>
53-
</div>
54-
<div
55-
class="col"
56-
*ngIf="
57-
group.value === displayStates.rxLet ||
58-
group.value === displayStates.all
59-
"
60-
>
61-
<rxa-v3-a></rxa-v3-a>
62-
</div>
63-
<div
64-
class="col"
65-
*ngIf="
66-
group.value === displayStates.rxForm ||
67-
group.value === displayStates.all
68-
"
69-
>
70-
<rxa-v4-a></rxa-v4-a>
71-
</div>
36+
@if (
37+
group.value === displayStates.native ||
38+
group.value === displayStates.all
39+
) {
40+
<div class="col">
41+
<rxa-v1-a></rxa-v1-a>
42+
</div>
43+
}
44+
@if (
45+
group.value === displayStates.push ||
46+
group.value === displayStates.all
47+
) {
48+
<div class="col">
49+
<rxa-v2-a></rxa-v2-a>
50+
</div>
51+
}
52+
@if (
53+
group.value === displayStates.rxLet ||
54+
group.value === displayStates.all
55+
) {
56+
<div class="col">
57+
<rxa-v3-a></rxa-v3-a>
58+
</div>
59+
}
60+
@if (
61+
group.value === displayStates.rxForm ||
62+
group.value === displayStates.all
63+
) {
64+
<div class="col">
65+
<rxa-v4-a></rxa-v4-a>
66+
</div>
67+
}
7268
</div>
7369
</rxa-visualizer>
7470
`,

‎apps/demos/src/app/features/concepts/global-order/push-v/v2-b.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ import { tap } from 'rxjs/operators';
1515
<div visualizerHeader>
1616
<h1>B<small>v2</small></h1>
1717
<div class="d-flex">
18-
<rxa-dirty-check *ngFor="let i of numExpressions"></rxa-dirty-check>
18+
@for (i of numExpressions; track i) {
19+
<rxa-dirty-check />
20+
}
1921
</div>
2022
</div>
2123
<div class="row w-100">

‎apps/demos/src/app/features/concepts/global-order/rx-form-v/v4-b.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ import { UntypedFormBuilder, FormGroup, Validators } from '@angular/forms';
2323
<form [formGroup]="form">
2424
<label for="phone"
2525
>Value
26-
<span *ngIf="!form.get('value').valid"
27-
>- {{ form.get('value').value }}</span
28-
>
26+
@if (!form.get('value').valid) {
27+
<span>- {{ form.get('value').value }}</span>
28+
}
2929
</label>
3030
<input
3131
type="text"

‎apps/demos/src/app/features/concepts/nested-vs-injected/nested-vs-projected.component.ts

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,22 @@ import { CdHelper } from '../../../shared/utils/cd-helper';
2525
Toggle visibility to reset
2626
</button>
2727
</div>
28-
<div class="row" *ngIf="isVisible">
29-
<div class="col" *ngIf="visible(group, displayStates.nested)">
30-
<h2>Nested</h2>
31-
<rxa-cd-nested></rxa-cd-nested>
28+
@if (isVisible) {
29+
<div class="row">
30+
@if (visible(group, displayStates.nested)) {
31+
<div class="col">
32+
<h2>Nested</h2>
33+
<rxa-cd-nested></rxa-cd-nested>
34+
</div>
35+
}
36+
@if (visible(group, displayStates.projected)) {
37+
<div class="col">
38+
<h2>Projected</h2>
39+
<rxa-cd-injected></rxa-cd-injected>
40+
</div>
41+
}
3242
</div>
33-
<div class="col" *ngIf="visible(group, displayStates.projected)">
34-
<h2>Projected</h2>
35-
<rxa-cd-injected></rxa-cd-injected>
36-
</div>
37-
</div>
43+
}
3844
</rxa-visualizer>
3945
`,
4046
providers: [CdHelper],

‎apps/demos/src/app/features/concepts/passing-values/passing-values.component.ts

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -49,44 +49,50 @@ import { BehaviorSubject } from 'rxjs';
4949
</div>
5050
</div>
5151
</ng-container>
52-
<div class="row w-100" *ngIf="isVisible">
53-
<div class="col" *ngIf="visible(group, displayStates.static)">
54-
<h2 class="mat-subheader">Static</h2>
55-
<rxa-value-provider
56-
[min]="min"
57-
[max]="max"
58-
[changes$]="btnBothClick$"
59-
#staticVal="rxaValueProvider"
60-
></rxa-value-provider>
61-
<div class="mb-1">
62-
<button mat-mini-fab (click)="staticVal.next()">
63-
<mat-icon>add</mat-icon>
64-
</button>
65-
</div>
66-
<rxa-recursive-static
67-
[depth]="depth"
68-
[value]="staticVal.int"
69-
></rxa-recursive-static>
70-
</div>
71-
<div class="col" *ngIf="visible(group, displayStates.observable)">
72-
<h2 class="mat-subheader">Observable</h2>
73-
<rxa-value-provider
74-
[min]="min"
75-
[max]="max"
76-
[changes$]="btnBothClick$"
77-
#observableVal="rxaValueProvider"
78-
></rxa-value-provider>
79-
<div class="mb-1">
80-
<button mat-mini-fab [unpatch] (click)="observableVal.next()">
81-
<mat-icon>add</mat-icon>
82-
</button>
83-
</div>
84-
<rxa-recursive-observable
85-
[depth]="depth"
86-
[value$]="observableVal.int$"
87-
></rxa-recursive-observable>
52+
@if (isVisible) {
53+
<div class="row w-100">
54+
@if (visible(group, displayStates.static)) {
55+
<div class="col">
56+
<h2 class="mat-subheader">Static</h2>
57+
<rxa-value-provider
58+
[min]="min"
59+
[max]="max"
60+
[changes$]="btnBothClick$"
61+
#staticVal="rxaValueProvider"
62+
></rxa-value-provider>
63+
<div class="mb-1">
64+
<button mat-mini-fab (click)="staticVal.next()">
65+
<mat-icon>add</mat-icon>
66+
</button>
67+
</div>
68+
<rxa-recursive-static
69+
[depth]="depth"
70+
[value]="staticVal.int"
71+
></rxa-recursive-static>
72+
</div>
73+
}
74+
@if (visible(group, displayStates.observable)) {
75+
<div class="col">
76+
<h2 class="mat-subheader">Observable</h2>
77+
<rxa-value-provider
78+
[min]="min"
79+
[max]="max"
80+
[changes$]="btnBothClick$"
81+
#observableVal="rxaValueProvider"
82+
></rxa-value-provider>
83+
<div class="mb-1">
84+
<button mat-mini-fab [unpatch] (click)="observableVal.next()">
85+
<mat-icon>add</mat-icon>
86+
</button>
87+
</div>
88+
<rxa-recursive-observable
89+
[depth]="depth"
90+
[value$]="observableVal.int$"
91+
></rxa-recursive-observable>
92+
</div>
93+
}
8894
</div>
89-
</div>
95+
}
9096
</rxa-visualizer>
9197
`,
9298
changeDetection: ChangeDetectionStrategy.Default,

0 commit comments

Comments
 (0)