Skip to content

Commit bebb4d6

Browse files
authored
Merge pull request rx-angular#1356 from rx-angular/harmonize-inputs
Harmonize inputs
2 parents b47167f + 16aab61 commit bebb4d6

21 files changed

+269
-260
lines changed

apps/demos/src/app/features/template/rx-let/error-handling/error-handling.component.ts

Lines changed: 61 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,31 @@ import { RxState } from '@rx-angular/state';
77
selector: 'rxa-let-error-handling',
88
template: `
99
<mat-card class="card">
10-
1110
<mat-card-header>
12-
<h3>Error Handling <br/>
11+
<h3>
12+
Error Handling <br />
1313
<small>error template & rx-context class names</small>
1414
</h3>
1515
</mat-card-header>
1616
1717
<mat-card-content>
1818
<div
19-
[ngClass]="{'let-error': e}"
20-
*rxLet="numbers$;
21-
let r;
22-
let e = $rxError;
23-
rxSuspense: suspenseView
24-
"
19+
[ngClass]="{ 'let-error': e }"
20+
*rxLet="numbers$; let r; let e = error; suspense: suspenseView"
2521
>
2622
<div *ngIf="e" class="error-message">
27-
{{e}}
23+
{{ e }}
2824
</div>
2925
<mat-form-field>
3026
<label>Age</label>
3127
<input
3228
type="text"
3329
[value]="r"
3430
(input)="numbersSubject$.next($event.target?.value)"
35-
matInput/>
31+
matInput
32+
/>
3633
</mat-form-field>
37-
<br/>
34+
<br />
3835
<button mat-raised-button color="primary">Send</button>
3936
</div>
4037
@@ -50,80 +47,77 @@ import { RxState } from '@rx-angular/state';
5047
<button mat-button [unpatch] (click)="numbersSubject$.next('-1')">
5148
error
5249
</button>
53-
<button mat-button [unpatch] (click)="reset()">
54-
reset
55-
</button>
50+
<button mat-button [unpatch] (click)="reset()">reset</button>
5651
</mat-card-actions>
57-
5852
</mat-card>
5953
`,
60-
styles: [`
61-
mat-card-content {
62-
min-height: 10rem;
63-
}
64-
65-
.card {
66-
margin: 2rem;
67-
width: 20rem;
68-
}
69-
70-
.error-message {
71-
border: 1px solid red;
72-
background-color: rgba(211, 211, 211, 0.7);
73-
color: red;
74-
position: absolute;
75-
top: 100%;
76-
left: 50%;
77-
text-align: center;
78-
z-index: 10;
79-
padding: 10px;
80-
margin: -25% -25%;
81-
display: block;
82-
line-height: 45px;
83-
}
84-
85-
.let-error {
54+
styles: [
55+
`
56+
mat-card-content {
57+
min-height: 10rem;
58+
}
59+
60+
.card {
61+
margin: 2rem;
62+
width: 20rem;
63+
}
64+
65+
.error-message {
66+
border: 1px solid red;
67+
background-color: rgba(211, 211, 211, 0.7);
68+
color: red;
69+
position: absolute;
70+
top: 100%;
71+
left: 50%;
72+
text-align: center;
73+
z-index: 10;
74+
padding: 10px;
75+
margin: -25% -25%;
76+
display: block;
77+
line-height: 45px;
78+
}
79+
80+
.let-error {
8681
position: relative;
87-
}
88-
89-
.let-error input {
90-
transform: scale(1) rotate(2deg) !important;
91-
}
92-
93-
.let-error input {
94-
transform: scale(1) rotate(4deg) !important;
95-
}
96-
97-
.let-error mat-form-field {
98-
color: red;
99-
border-color: red;
100-
transform: scale(1) rotate(-2deg) !important;
101-
}
102-
103-
.let-error .mat-button-base {
104-
transform: scale(1) rotate(5deg) !important;
105-
}
106-
107-
`],
108-
providers: [RxState]
82+
}
83+
84+
.let-error input {
85+
transform: scale(1) rotate(2deg) !important;
86+
}
87+
88+
.let-error input {
89+
transform: scale(1) rotate(4deg) !important;
90+
}
91+
92+
.let-error mat-form-field {
93+
color: red;
94+
border-color: red;
95+
transform: scale(1) rotate(-2deg) !important;
96+
}
97+
98+
.let-error .mat-button-base {
99+
transform: scale(1) rotate(5deg) !important;
100+
}
101+
`,
102+
],
103+
providers: [RxState],
109104
})
110105
export class ErrorHandlingComponent {
111106
numbersSubject$ = new Subject<string>();
112107
numbers$: Observable<number> = this.setup();
113108

114-
constructor(private cdRef: ChangeDetectorRef) {
115-
}
109+
constructor(private cdRef: ChangeDetectorRef) {}
116110

117111
setup(): Observable<number> {
118112
return this.numbersSubject$.pipe(
119-
map(s => {
113+
map((s) => {
120114
const n = parseInt(s, 10);
121115
if (n === -1 || isNaN(n)) {
122116
throw new Error('useless information');
123117
}
124118
return n;
125119
}),
126-
scan((a, n) => n === 0 ? ++a : n),
120+
scan((a, n) => (n === 0 ? ++a : n)),
127121
share()
128122
);
129123
}
@@ -132,5 +126,4 @@ export class ErrorHandlingComponent {
132126
this.numbers$ = this.setup();
133127
this.cdRef.detectChanges();
134128
}
135-
136129
}

apps/demos/src/app/features/template/rx-let/http-errors/http-errors.component.ts

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,23 @@ import { RxState } from '@rx-angular/state';
1313
</mat-card-header>
1414
1515
<mat-card-content>
16-
<div *rxLet="httpResponse$;
17-
let r;
18-
let e = $rxError;
19-
">
16+
<div *rxLet="httpResponse$; let r; let e = error">
2017
<h2>Default Template</h2>
21-
R: {{ r | json }}
22-
E: {{ e | json }}
18+
R: {{ r | json }} E: {{ e | json }}
2319
</div>
24-
2520
</mat-card-content>
2621
2722
<mat-card-actions>
28-
<button mat-button [unpatch] (click)="reset()">
29-
reset
30-
</button>
31-
<button mat-button [unpatch] (click)="offlineError()">
32-
offline
33-
</button>
34-
<button mat-button [unpatch] (click)="authError()">
35-
auth
36-
</button>
37-
<button mat-button [unpatch] (click)="accessError()">
38-
access
39-
</button>
40-
<button mat-button [unpatch] (click)="serverError()">
41-
server
42-
</button>
23+
<button mat-button [unpatch] (click)="reset()">reset</button>
24+
<button mat-button [unpatch] (click)="offlineError()">offline</button>
25+
<button mat-button [unpatch] (click)="authError()">auth</button>
26+
<button mat-button [unpatch] (click)="accessError()">access</button>
27+
<button mat-button [unpatch] (click)="serverError()">server</button>
4328
</mat-card-actions>
4429
</mat-card>
45-
46-
47-
4830
`,
4931
styles: [
50-
`
32+
`
5133
mat-card-content {
5234
min-height: 10rem;
5335
display: flex;
@@ -66,20 +48,19 @@ import { RxState } from '@rx-angular/state';
6648
text-align: center;
6749
width: 20rem;
6850
}
69-
`
51+
`,
7052
],
71-
providers: [RxState]
53+
providers: [RxState],
7254
})
7355
export class HttpErrorsComponent {
7456
error$ = new Subject<HttpErrorResponse>();
7557
httpResponse$: Observable<Error> = this.setup();
7658

77-
constructor(private cdRef: ChangeDetectorRef) {
78-
}
59+
constructor(private cdRef: ChangeDetectorRef) {}
7960

8061
setup(): Observable<HttpErrorResponse> {
8162
return this.error$.pipe(
82-
concatMap(e => throwError(parseError(e))),
63+
concatMap((e) => throwError(parseError(e))),
8364
share()
8465
);
8566
}
@@ -104,7 +85,6 @@ export class HttpErrorsComponent {
10485
serverError() {
10586
this.error$.next(new HttpErrorResponse({ status: 501 }));
10687
}
107-
10888
}
10989

11090
function parseError(e: HttpErrorResponse): string {

apps/demos/src/app/features/template/rx-let/let-template-binding/examples/let-template-binding-http-example.component.ts

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { Component } from '@angular/core';
22
import { BehaviorSubject, from, interval, Subject, throwError } from 'rxjs';
3-
import { map, share, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
3+
import {
4+
map,
5+
share,
6+
switchMap,
7+
takeUntil,
8+
withLatestFrom,
9+
} from 'rxjs/operators';
410

511
@Component({
612
selector: 'rxa-let-template-binding-http-example',
@@ -16,9 +22,9 @@ import { map, share, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators
1622
heroes$;
1723
let hero;
1824
strategy: visibleStrategy;
19-
rxComplete: complete;
20-
rxError: error;
21-
rxSuspense: suspense
25+
complete: complete;
26+
error: error;
27+
suspense: suspense
2228
"
2329
>
2430
random Star Wars character fetched!
@@ -119,11 +125,11 @@ export class LetTemplateBindingHttpExampleComponent {
119125
if (error) {
120126
return throwError(error);
121127
} else {
122-
return fetch(
123-
`https://swapi.dev/api/people/${
124-
Math.floor(Math.random() * 50) + 1
125-
}`
126-
).then((a) => a.json());
128+
return fetch(
129+
`https://swapi.dev/api/people/${
130+
Math.floor(Math.random() * 50) + 1
131+
}`
132+
).then((a) => a.json());
127133
}
128134
}),
129135
map((hero) => hero.name || hero.detail || 'Not found')

apps/demos/src/app/features/template/rx-let/let-template-binding/examples/let-template-binding-subject-example.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import { scan, startWith } from 'rxjs/operators';
1919
signals$;
2020
let count;
2121
strategy: visibleStrategy;
22-
rxComplete: complete;
23-
rxError: error;
24-
rxSuspense: suspense
22+
complete: complete;
23+
error: error;
24+
suspense: suspense
2525
"
2626
>
2727
value emitted

apps/demos/src/app/features/template/rx-let/ng-if-hack/ng-if-hack-async.component.ts

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,23 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
66
<rxa-visualizer>
77
<div visualizerHeader>
88
<h3>*ngIf + async</h3>
9-
<rxa-value-provider [unpatched]="[]" [buttons]="true" #valP="rxaValueProvider"></rxa-value-provider>
9+
<rxa-value-provider
10+
[unpatched]="[]"
11+
[buttons]="true"
12+
#valP="rxaValueProvider"
13+
></rxa-value-provider>
1014
</div>
1115
12-
<ng-container *rxLet="valP.boolean$; let value;
13-
rxSuspense: suspenseView;
14-
rxError: errorView;
15-
rxComplete: completeView
16-
">
17-
*ngIf: {{ value | json }}<br/>
18-
16+
<ng-container
17+
*rxLet="
18+
valP.boolean$;
19+
let value;
20+
suspense: suspenseView;
21+
error: errorView;
22+
complete: completeView
23+
"
24+
>
25+
*ngIf: {{ value | json }}<br />
1926
</ng-container>
2027
2128
<ng-template #suspenseView>
@@ -30,12 +37,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
3037
<mat-icon color="primary">check</mat-icon>
3138
</ng-template>
3239
33-
3440
<!--
3541
<ng-container *rxLet="valP.boolean$; let value;
36-
rxSuspense: suspenseView;
37-
rxError: errorView;
38-
rxComplete: completeView
42+
suspense: suspenseView;
43+
error: errorView;
44+
complete: completeView
3945
">
4046
value: {{ value | json }}<br/>
4147
</ng-container>
@@ -52,12 +58,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
5258
<mat-icon color="primary">check</mat-icon>
5359
</ng-template>
5460
-->
55-
56-
5761
</rxa-visualizer>
5862
`,
59-
changeDetection: ChangeDetectionStrategy.OnPush
63+
changeDetection: ChangeDetectionStrategy.OnPush,
6064
})
61-
export class NgIfHackNgIfAsyncComponent {
62-
63-
}
65+
export class NgIfHackNgIfAsyncComponent {}

0 commit comments

Comments
 (0)