Skip to content

Navigation Menu

Sign in

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 28e3c1e

Browse filesBrowse files
hoebbelsBhoebbelsB
committed
feat(demos): implement rxChunk demo
1 parent 8882303 commit 28e3c1e
Copy full SHA for 28e3c1e

File tree

8 files changed

+152
-10
lines changed
Filter options

8 files changed

+152
-10
lines changed

‎apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.component.ts

Copy file name to clipboard
+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import { map } from 'rxjs/operators';
4+
5+
@Component({
6+
selector: 'rx-chunk-basic',
7+
template: `
8+
<rxa-visualizer>
9+
<ng-container visualizerHeader>
10+
<h3>*rxChunk</h3>
11+
<rxa-strategy-select
12+
(strategyChange)="strategy = $event"
13+
></rxa-strategy-select>
14+
<div>
15+
Rendercallback:
16+
<ng-container *rxLet="rendered$; let rendered">{{
17+
rendered
18+
}}</ng-container>
19+
</div>
20+
<div>
21+
<button mat-button (click)="showContent = !showContent">
22+
Toggle Content
23+
</button>
24+
</div>
25+
</ng-container>
26+
<div class="row w-100 mt-5">
27+
<ng-container *ngIf="showContent">
28+
<div class="col-6">
29+
<div><strong>Non-Chunked</strong></div>
30+
<rxa-work-visualizer
31+
[reCreateContentOnCd]="false"
32+
[work]="250"
33+
></rxa-work-visualizer>
34+
</div>
35+
<div class="col-6">
36+
<div><strong>Chunked</strong></div>
37+
<ng-container *rxChunk="strategy; renderCallback: renderCallback">
38+
<rxa-work-visualizer
39+
[reCreateContentOnCd]="false"
40+
[work]="250"
41+
></rxa-work-visualizer>
42+
</ng-container>
43+
</div>
44+
</ng-container>
45+
</div>
46+
</rxa-visualizer>
47+
`,
48+
changeDetection: ChangeDetectionStrategy.OnPush,
49+
})
50+
export class RxChunkBasicComponent {
51+
strategy: string;
52+
53+
showContent = true;
54+
55+
renderCallback = new Subject<void>();
56+
private _rendered = 1;
57+
rendered$ = this.renderCallback.pipe(map(() => this._rendered++));
58+
}

‎apps/demos/src/app/features/template/chunk/basic/rx-chunk-basic.module.ts

Copy file name to clipboard
+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { RouterModule, Routes } from '@angular/router';
5+
import { RxChunk } from '@rx-angular/template/chunk';
6+
import { RxLet } from '@rx-angular/template/let';
7+
import { RenderingWorkModule } from '../../../../shared/debug-helper/rendering-work/rendering-work.module';
8+
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/index';
9+
import { VisualizerModule } from '../../../../shared/debug-helper/visualizer/index';
10+
import { WorkModule } from '../../../../shared/debug-helper/work/work.module';
11+
import { RxChunkBasicComponent } from './rx-chunk-basic.component';
12+
13+
const routes: Routes = [
14+
{
15+
path: '',
16+
component: RxChunkBasicComponent,
17+
},
18+
];
19+
20+
@NgModule({
21+
imports: [
22+
RouterModule.forChild(routes),
23+
VisualizerModule,
24+
StrategySelectModule,
25+
RxChunk,
26+
CommonModule,
27+
RxLet,
28+
RenderingWorkModule,
29+
WorkModule,
30+
MatButtonModule,
31+
],
32+
exports: [],
33+
declarations: [RxChunkBasicComponent],
34+
providers: [],
35+
})
36+
export class RxChunkBasicModule {}

‎apps/demos/src/app/features/template/chunk/rx-chunk-demo.module.ts

Copy file name to clipboard
+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { RouterModule } from '@angular/router';
4+
import { ROUTES } from './rx-chunk.routes';
5+
6+
@NgModule({
7+
imports: [CommonModule, RouterModule.forChild(ROUTES)],
8+
})
9+
export class RxChunkDemoModule {}

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

Copy file name to clipboard
+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const RX_CHUNK_MENU_ITEMS = [
2+
{
3+
label: 'Basic',
4+
link: 'basic',
5+
},
6+
];

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

Copy file name to clipboard
+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Routes } from '@angular/router';
2+
3+
export const ROUTES: Routes = [
4+
{
5+
path: '',
6+
redirectTo: 'basic',
7+
pathMatch: 'full',
8+
},
9+
{
10+
path: 'basic',
11+
loadChildren: () =>
12+
import('./basic/rx-chunk-basic.module').then((m) => m.RxChunkBasicModule),
13+
},
14+
];

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

Copy file name to clipboardExpand all lines: apps/demos/src/app/features/template/template-shell.menu.ts
+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { RX_CHUNK_MENU_ITEMS } from './chunk/rx-chunk.menu';
12
import { PUSH_PIPE_MENU } from './push/push.menu';
23
import { MENU_ITEMS as RX_LET_MENU_ITEMS } from './rx-let/rx-let.menu';
34
import { MENU_ITEMS as RX_IF_MENU_ITEMS } from './rx-if/rx-if.menu';
@@ -39,6 +40,11 @@ export const TEMPLATE_MENU = [
3940
link: 'rx-for',
4041
children: RX_FOR_MENU_ITEMS,
4142
},
43+
{
44+
label: '*rxChunk',
45+
link: 'rx-chunk',
46+
children: RX_CHUNK_MENU_ITEMS,
47+
},
4248
{
4349
label: 'Virtual Scrolling',
4450
link: 'rx-virtual-for',

‎apps/demos/src/app/features/template/template-shell.module.ts

Copy file name to clipboardExpand all lines: apps/demos/src/app/features/template/template-shell.module.ts
+9-4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ const ROUTES: Routes = [
1717
loadChildren: () =>
1818
import('./rx-let/rx-let-demo.module').then((m) => m.RxLetDemoModule),
1919
},
20+
{
21+
path: 'rx-chunk',
22+
loadChildren: () =>
23+
import('./chunk/rx-chunk-demo.module').then((m) => m.RxChunkDemoModule),
24+
},
2025
{
2126
path: 'rx-if',
2227
loadChildren: () =>
@@ -31,7 +36,7 @@ const ROUTES: Routes = [
3136
path: 'rx-virtual-for',
3237
loadChildren: () =>
3338
import('./rx-virtual-for/rx-virtual-for.module').then(
34-
(m) => m.RxVirtualForDemoModule
39+
(m) => m.RxVirtualForDemoModule,
3540
),
3641
},
3742
{
@@ -48,7 +53,7 @@ const ROUTES: Routes = [
4853
path: 'rx-context',
4954
loadChildren: () =>
5055
import('./rx-context/rx-context.routed.module').then(
51-
(m) => m.RxContextRoutedModule
56+
(m) => m.RxContextRoutedModule,
5257
),
5358
},
5459
{
@@ -60,14 +65,14 @@ const ROUTES: Routes = [
6065
path: 'view-port-prio',
6166
loadChildren: () =>
6267
import('./viewport-prio/viewport-prio-demo.module').then(
63-
(m) => m.ViewportPrioModule
68+
(m) => m.ViewportPrioModule,
6469
),
6570
},
6671
{
6772
path: 'render-callback',
6873
loadChildren: () =>
6974
import('./render-callback/render-callback.module').then(
70-
(m) => m.RenderCallbackModule
75+
(m) => m.RenderCallbackModule,
7176
),
7277
},
7378
];

‎apps/demos/src/app/shared/debug-helper/visualizer/visualizer/work-visualizer.component.ts

Copy file name to clipboardExpand all lines: apps/demos/src/app/shared/debug-helper/visualizer/visualizer/work-visualizer.component.ts
+14-6
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ export class WorkVisualizerComponent extends Hooks {
8181
@Input()
8282
renderingsOn = false;
8383

84+
@Input() reCreateContentOnCd = true;
85+
8486
changeO$ = new ReplaySubject<Observable<any>>(1);
8587

8688
@Input()
@@ -105,24 +107,30 @@ export class WorkVisualizerComponent extends Hooks {
105107
this.changeO$.pipe(
106108
distinctUntilChanged(),
107109
switchMap((o$) =>
108-
!!this.key ? o$.pipe(map((s) => s[this.key])) : o$
110+
!!this.key ? o$.pipe(map((s) => s[this.key])) : o$,
109111
),
110112
distinctUntilChanged(),
111-
tap((v) => console.log('value', v))
112-
)
113-
)
114-
)
113+
tap((v) => console.log('value', v)),
114+
),
115+
),
116+
),
115117
);
116118

119+
private items: any[];
120+
117121
constructor() {
118122
super();
119123
}
120124

121125
getChildren(): number[] {
126+
if (!this.reCreateContentOnCd && this.items) {
127+
return this.items;
128+
}
122129
const items = [];
123130
for (let i = 0; i <= this.work * 10; i++) {
124131
items.push(Math.ceil(Math.random() * 100));
125132
}
126-
return items;
133+
this.items = items;
134+
return this.items;
127135
}
128136
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.