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

Skip to content

Commit 9b9e464

Browse files
hoebbelsBhoebbelsB
committed
chore: merge main
2 parents e750e33 + 9d1d099 commit 9b9e464

File tree

22 files changed

+634
-426
lines changed

22 files changed

+634
-426
lines changed

‎apps/demos/src/app/features/template/rx-let/rx-let.menu.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
export const MENU_ITEMS = [
22
{
33
label: 'Basic',
4-
link: 'basic'
4+
link: 'basic',
5+
},
6+
{
7+
label: 'Scoping',
8+
link: 'scoping',
59
},
610
{
711
label: 'Error Handling',
8-
link: 'error-handling'
12+
link: 'error-handling',
913
},
1014
{
1115
label: 'Exception Handling',
12-
link: 'exception-handling'
16+
link: 'exception-handling',
1317
},
1418
{
1519
label: 'Http Errors',
16-
link: 'http-errors'
20+
link: 'http-errors',
1721
},
1822
{
1923
label: '*ngif hack',
20-
link: 'ng-if-hack'
24+
link: 'ng-if-hack',
2125
},
2226
{
2327
label: 'Template Bindings',
24-
link: 'template-bindings'
28+
link: 'template-bindings',
2529
},
2630
{
2731
label: 'Preloading Techniques',
28-
link: 'preloading-images'
32+
link: 'preloading-images',
2933
},
3034
{
3135
label: 'Lazy Components',
32-
link: 'lazy-components'
33-
}
36+
link: 'lazy-components',
37+
},
3438
];

‎apps/demos/src/app/features/template/rx-let/rx-let.routes.ts

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,63 @@ import { Routes } from '@angular/router';
33
export const ROUTES: Routes = [
44
{
55
path: '',
6-
redirectTo: 'basic'
6+
redirectTo: 'basic',
77
},
88
{
99
path: 'basic',
10-
loadChildren: () => import('./basic/rx-let-basic.module')
11-
.then(m => m.RxLetBasicModule)
10+
loadChildren: () =>
11+
import('./basic/rx-let-basic.module').then((m) => m.RxLetBasicModule),
12+
},
13+
{
14+
path: 'scoping',
15+
loadChildren: () =>
16+
import('./scoping/rx-let-scoping.module').then(
17+
(m) => m.RxLetScopingModule
18+
),
1219
},
1320
{
1421
path: 'error-handling',
15-
loadChildren: () => import('./error-handling/error-handing.module')
16-
.then(m => m.ErrorHandingModule)
22+
loadChildren: () =>
23+
import('./error-handling/error-handing.module').then(
24+
(m) => m.ErrorHandingModule
25+
),
1726
},
1827
{
1928
path: 'exception-handling',
20-
loadChildren: () => import('./exception-handling/rx-let-exception-handling.module')
21-
.then(m => m.RxLetExceptionHandlingModule)
29+
loadChildren: () =>
30+
import('./exception-handling/rx-let-exception-handling.module').then(
31+
(m) => m.RxLetExceptionHandlingModule
32+
),
2233
},
2334
{
2435
path: 'http-errors',
25-
loadChildren: () => import('./http-errors/http-error.module')
26-
.then(m => m.HttpErrorModule)
36+
loadChildren: () =>
37+
import('./http-errors/http-error.module').then((m) => m.HttpErrorModule),
2738
},
2839
{
2940
path: 'template-bindings',
30-
loadChildren: () => import('./let-template-binding/let-template-binding.module')
31-
.then(m => m.LetTemplateBindingModule)
41+
loadChildren: () =>
42+
import('./let-template-binding/let-template-binding.module').then(
43+
(m) => m.LetTemplateBindingModule
44+
),
3245
},
3346
{
3447
path: 'ng-if-hack',
35-
loadChildren: () => import('./ng-if-hack/ng-if-hack.module')
36-
.then(m => m.NgIfHackModule)
48+
loadChildren: () =>
49+
import('./ng-if-hack/ng-if-hack.module').then((m) => m.NgIfHackModule),
3750
},
3851
{
3952
path: 'preloading-images',
40-
loadChildren: () => import('./preloading-images/preloading-images.module')
41-
.then(m => m.PreloadingImagesModule)
53+
loadChildren: () =>
54+
import('./preloading-images/preloading-images.module').then(
55+
(m) => m.PreloadingImagesModule
56+
),
4257
},
4358
{
4459
path: 'lazy-components',
45-
loadChildren: () => import('./lazy-loading-components/lazy-loading-components.module')
46-
.then(m => m.LazyLoadingComponentsModule)
47-
}
60+
loadChildren: () =>
61+
import('./lazy-loading-components/lazy-loading-components.module').then(
62+
(m) => m.LazyLoadingComponentsModule
63+
),
64+
},
4865
];

‎apps/demos/src/app/features/template/rx-let/scoping/intermediate.component.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {
2+
AfterContentInit,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ContentChild,
6+
ContentChildren,
7+
Directive,
8+
OnInit,
9+
QueryList,
10+
} from '@angular/core';
11+
import { startWith } from 'rxjs';
12+
13+
@Directive({
14+
selector: '[rxaContentChild]',
15+
})
16+
export class ContentChildDirective {}
17+
18+
@Component({
19+
selector: 'rxa-content-parent',
20+
template: ` <ng-content></ng-content> `,
21+
changeDetection: ChangeDetectionStrategy.OnPush,
22+
})
23+
export class ContentParent implements AfterContentInit {
24+
// @ContentChildren(ContentChildDirective) children: QueryList<ContentChildDirective>;
25+
@ContentChild(ContentChildDirective)
26+
set child(child: ContentChildDirective) {
27+
console.log('child', child);
28+
}
29+
30+
ngAfterContentInit() {
31+
/*console.log('contentParent', this.children);
32+
this.children.changes
33+
.pipe(startWith(this.children))
34+
.subscribe((children) => {
35+
console.log('children', children);
36+
});*/
37+
}
38+
}

‎apps/demos/src/app/features/template/rx-let/scoping/rx-let-scoping.component.ts

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import {
2+
AfterViewInit,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
QueryList,
7+
ViewChildren,
8+
} from '@angular/core';
9+
import { LetDirective } from '@rx-angular/template/let';
10+
import { Subject } from 'rxjs';
11+
import { map } from 'rxjs/operators';
12+
13+
@Component({
14+
selector: 'rxa-rx-let-poc',
15+
template: `
16+
<rxa-visualizer>
17+
<div visualizerHeader>
18+
<h2>rxLet SCOPING</h2>
19+
<rxa-strategy-select
20+
(strategyChange)="strategy = $event"
21+
></rxa-strategy-select>
22+
<rxa-value-provider
23+
#v="rxaValueProvider"
24+
[buttons]="true"
25+
></rxa-value-provider>
26+
<button (click)="v.next()" class="mr-1">toggle</button>
27+
<button [unpatch] (click)="v.next()">toggle (unpatched)</button>
28+
</div>
29+
<div class="row w-100">
30+
<div class="col-sm-3">
31+
<h3>RxLet</h3>
32+
<rxa-content-parent>
33+
<div
34+
class="dh-embedded-view"
35+
*rxLet="
36+
v.incremental$;
37+
let value;
38+
parent: withParent;
39+
renderCallback: renderCallback;
40+
strategy: strategy
41+
"
42+
>
43+
<rxa-dirty-check></rxa-dirty-check>
44+
Value: {{ value }}
45+
<div #letChild rxaContentChild></div>
46+
</div>
47+
</rxa-content-parent>
48+
</div>
49+
<div class="col-sm-3">
50+
<h3>RxLet</h3>
51+
<rxa-content-parent>
52+
<div
53+
class="dh-embedded-view"
54+
*rxLet="
55+
v.incremental$;
56+
let value;
57+
parent: withParent;
58+
renderCallback: renderCallback;
59+
strategy: strategy
60+
"
61+
>
62+
<rxa-dirty-check></rxa-dirty-check>
63+
Value: {{ value }}
64+
<div #letChild rxaContentChild></div>
65+
</div>
66+
</rxa-content-parent>
67+
</div>
68+
<div class="col-sm-3">
69+
<h3>RxLet</h3>
70+
<rxa-content-parent>
71+
<div
72+
class="dh-embedded-view"
73+
*rxLet="
74+
v.incremental$;
75+
let value;
76+
parent: withParent;
77+
renderCallback: renderCallback;
78+
strategy: strategy
79+
"
80+
>
81+
<rxa-dirty-check></rxa-dirty-check>
82+
Value: {{ value }}
83+
<div #letChild rxaContentChild></div>
84+
</div>
85+
</rxa-content-parent>
86+
</div>
87+
<div class="col-sm-3">
88+
<h3>RxLet</h3>
89+
<rxa-content-parent>
90+
<div
91+
class="dh-embedded-view"
92+
*rxLet="
93+
v.incremental$;
94+
let value;
95+
parent: withParent;
96+
renderCallback: renderCallback;
97+
strategy: strategy
98+
"
99+
>
100+
<rxa-dirty-check></rxa-dirty-check>
101+
Value: {{ value }}
102+
<div #letChild rxaContentChild></div>
103+
</div>
104+
</rxa-content-parent>
105+
</div>
106+
</div>
107+
</rxa-visualizer>
108+
`,
109+
changeDetection: ChangeDetectionStrategy.OnPush,
110+
})
111+
export class RxLetScopingComponent implements AfterViewInit {
112+
private _renderCalled = 0;
113+
readonly renderCallback = new Subject();
114+
115+
@ViewChildren('letChild') letChildren: QueryList<ElementRef>;
116+
117+
rendered$ = this.renderCallback.pipe(map(() => this._renderCalled++));
118+
119+
strategy;
120+
121+
withParent = true;
122+
123+
ngAfterViewInit() {
124+
this.letChildren.changes.subscribe((letDirs) => {
125+
console.log('letChildren', letDirs);
126+
});
127+
}
128+
}

‎apps/demos/src/app/features/template/rx-let/scoping/rx-let-scoping.module.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { NgModule } from '@angular/core';
2+
import { MatButtonModule } from '@angular/material/button';
3+
import { RouterModule, Routes } from '@angular/router';
4+
import { UnpatchEventsModule } from '../../../../rx-angular-pocs/template/directives/unpatch/unpatch-events.module';
5+
import { DirtyChecksModule } from '../../../../shared/debug-helper/dirty-checks/index';
6+
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/strategy-select.module';
7+
import { ValueProvidersModule } from '../../../../shared/debug-helper/value-provider/value-providers.module';
8+
import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/visualizer.module';
9+
import { ContentChildDirective, ContentParent } from './intermediate.component';
10+
import { RxLetScopingComponent } from './rx-let-scoping.component';
11+
import { LetModule } from '@rx-angular/template/let';
12+
13+
const routes: Routes = [
14+
{
15+
path: '',
16+
component: RxLetScopingComponent,
17+
},
18+
];
19+
20+
@NgModule({
21+
declarations: [RxLetScopingComponent, ContentParent, ContentChildDirective],
22+
imports: [
23+
RouterModule.forChild(routes),
24+
MatButtonModule,
25+
ValueProvidersModule,
26+
UnpatchEventsModule,
27+
StrategySelectModule,
28+
VisualizerModule,
29+
LetModule,
30+
DirtyChecksModule,
31+
],
32+
})
33+
export class RxLetScopingModule {}

‎apps/demos/src/app/rx-angular-pocs/cdk/debug/dirty-check/dirty-checks.component.ts

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular/core';
1+
import {
2+
AfterViewInit,
3+
Component,
4+
ElementRef,
5+
Input,
6+
Renderer2,
7+
} from '@angular/core';
28

39
@Component({
410
selector: 'rxa-dirty-check',
@@ -8,12 +14,12 @@ import { AfterViewInit, Component, ElementRef, Input, Renderer2 } from '@angular
814
</div>
915
`,
1016
styles: [
11-
`
17+
`
1218
:host .indicator {
1319
border: 1px solid #ffff005f;
1420
}
15-
`
16-
]
21+
`,
22+
],
1723
//changeDetection: ChangeDetectionStrategy.OnPush
1824
})
1925
export class DirtyChecksComponent implements AfterViewInit {
@@ -23,8 +29,7 @@ export class DirtyChecksComponent implements AfterViewInit {
2329
@Input()
2430
log;
2531

26-
constructor(private elementRef: ElementRef, private renderer: Renderer2) {
27-
}
32+
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
2833

2934
ngAfterViewInit() {
3035
this.displayElem = this.elementRef.nativeElement.children[0].children[0];
@@ -35,7 +40,7 @@ export class DirtyChecksComponent implements AfterViewInit {
3540
if (this.log) {
3641
console.log('dirtyCheck', this.log);
3742
} else {
38-
3943
}
44+
return this.dirtyChecks++;
4045
}
4146
}

‎apps/demos/src/app/rx-angular-pocs/template/directives/for/rx-for.directive.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
createListTemplateManager,
2323
RxDefaultListViewContext,
2424
RxListManager,
25-
RxListViewComputedContext, RxListViewContext
25+
RxListViewComputedContext,
26+
RxListViewContext,
2627
} from '@rx-angular/cdk/template';
2728

2829
import { ReplaySubject, Subject, Observable, Subscription } from 'rxjs';
@@ -632,7 +633,6 @@ export class RxFor<T, U extends NgIterable<T> = NgIterable<T>>
632633
iterableDiffers: this.iterableDiffers,
633634
renderSettings: {
634635
cdRef: this.cdRef,
635-
eRef: this.eRef,
636636
strategies: this.strategyProvider.strategies as any, // TODO: move strategyProvider
637637
defaultStrategyName: this.strategyProvider.primaryStrategy,
638638
parent: coerceBooleanProperty(this.renderParent),

0 commit comments

Comments
 (0)