Skip to content

Commit 401031a

Browse files
sachith94-lionsachith94-lion
authored
Merge pull request #11 from RandomSoftwareSL/feature/lazy-loading
lazy loading implementation
2 parents f643259 + fb7662e commit 401031a

File tree

7 files changed

+224
-9
lines changed

7 files changed

+224
-9
lines changed

‎projects/consumer/src/app/app.component.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@
1515
requiredErrorMessage="Year filed cannot be empty"
1616
[autoDisplayFirst]="true"
1717
placeholder="Year"
18-
></typeHeadInput>
18+
[isVirtualScroll]="true"
19+
[virtualScrollItemSize]="40"
20+
[virtualScrollOptions]="virtualScrollOptions"
21+
>
22+
<ng-template appTypeheadInputLoaderTmp>
23+
<div class="px-4 pt-3">loading ...</div>
24+
</ng-template>
25+
</typeHeadInput>
1926
</form>
2027

2128
<button (click)="disabled()">disabled</button>

‎projects/consumer/src/app/app.component.ts‎

Lines changed: 182 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
UntypedFormGroup,
66
Validators,
77
} from "@angular/forms";
8-
import { SelectItem } from "primeng/api";
8+
import { ScrollerOptions, SelectItem } from "primeng/api";
99
import { BehaviorSubject, map, of } from "rxjs";
1010

1111
@Component({
@@ -22,6 +22,12 @@ export class AppComponent {
2222
yearSource = new BehaviorSubject<string[]>(null!);
2323
yearObs$ = this.yearSource.asObservable();
2424

25+
virtualScrollOptions: ScrollerOptions = {
26+
delay: 50,
27+
showLoader: true,
28+
lazy: true,
29+
};
30+
2531
constructor(private formBuilder: UntypedFormBuilder) {
2632
this.consumerForm = this.formBuilder.group({
2733
year: new UntypedFormControl("", Validators.required),
@@ -63,6 +69,181 @@ export class AppComponent {
6369
"1992",
6470
"1991",
6571
"1990",
72+
"2024",
73+
"2023",
74+
"2022",
75+
"2021",
76+
"2020",
77+
"2019",
78+
"2018",
79+
"2017",
80+
"2016",
81+
"2015",
82+
"2014",
83+
"2013",
84+
"2012",
85+
"2011",
86+
"2010",
87+
"2009",
88+
"2008",
89+
"2007",
90+
"2006",
91+
"2005",
92+
"2004",
93+
"2003",
94+
"2002",
95+
"2001",
96+
"2000",
97+
"1999",
98+
"1998",
99+
"1997",
100+
"1996",
101+
"1995",
102+
"1994",
103+
"1993",
104+
"1992",
105+
"1991",
106+
"1990",
107+
"2024",
108+
"2023",
109+
"2022",
110+
"2021",
111+
"2020",
112+
"2019",
113+
"2018",
114+
"2017",
115+
"2016",
116+
"2015",
117+
"2014",
118+
"2013",
119+
"2012",
120+
"2011",
121+
"2010",
122+
"2009",
123+
"2008",
124+
"2007",
125+
"2006",
126+
"2005",
127+
"2004",
128+
"2003",
129+
"2002",
130+
"2001",
131+
"2000",
132+
"1999",
133+
"1998",
134+
"1997",
135+
"1996",
136+
"1995",
137+
"1994",
138+
"1993",
139+
"1992",
140+
"1991",
141+
"1990",
142+
"2024",
143+
"2023",
144+
"2022",
145+
"2021",
146+
"2020",
147+
"2019",
148+
"2018",
149+
"2017",
150+
"2016",
151+
"2015",
152+
"2014",
153+
"2013",
154+
"2012",
155+
"2011",
156+
"2010",
157+
"2009",
158+
"2008",
159+
"2007",
160+
"2006",
161+
"2005",
162+
"2004",
163+
"2003",
164+
"2002",
165+
"2001",
166+
"2000",
167+
"1999",
168+
"1998",
169+
"1997",
170+
"1996",
171+
"1995",
172+
"1994",
173+
"1993",
174+
"1992",
175+
"1991",
176+
"1990",
177+
"2024",
178+
"2023",
179+
"2022",
180+
"2021",
181+
"2020",
182+
"2019",
183+
"2018",
184+
"2017",
185+
"2016",
186+
"2015",
187+
"2014",
188+
"2013",
189+
"2012",
190+
"2011",
191+
"2010",
192+
"2009",
193+
"2008",
194+
"2007",
195+
"2006",
196+
"2005",
197+
"2004",
198+
"2003",
199+
"2002",
200+
"2001",
201+
"2000",
202+
"1999",
203+
"1998",
204+
"1997",
205+
"1996",
206+
"1995",
207+
"1994",
208+
"1993",
209+
"1992",
210+
"1991",
211+
"1990",
212+
"2024",
213+
"2023",
214+
"2022",
215+
"2021",
216+
"2020",
217+
"2019",
218+
"2018",
219+
"2017",
220+
"2016",
221+
"2015",
222+
"2014",
223+
"2013",
224+
"2012",
225+
"2011",
226+
"2010",
227+
"2009",
228+
"2008",
229+
"2007",
230+
"2006",
231+
"2005",
232+
"2004",
233+
"2003",
234+
"2002",
235+
"2001",
236+
"2000",
237+
"1999",
238+
"1998",
239+
"1997",
240+
"1996",
241+
"1995",
242+
"1994",
243+
"1993",
244+
"1992",
245+
"1991",
246+
"1990",
66247
];
67248

68249
this.yearSource.next(years);

‎projects/type-head-input/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@randomsoftwareltd/type-head-input",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"peerDependencies": {
55
"@angular/common": "^17.2.3",
66
"@angular/core": "^17.2.3",

‎projects/type-head-input/src/lib/directive/form-template.directive.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { Directive, TemplateRef } from '@angular/core';
1+
import { Directive, TemplateRef } from "@angular/core";
22

3-
@Directive({ selector: '[appTypeheadInputItemTmp]' })
3+
@Directive({ selector: "[appTypeheadInputItemTmp]" })
44
export class NgTypeHeadInputItemTemplateDirective {
55
constructor(public template: TemplateRef<any>) {}
66
}
77

8-
@Directive({ selector: '[appTypeheadInputFilterTmp]' })
8+
@Directive({ selector: "[appTypeheadInputFilterTmp]" })
99
export class NgTypeHeadInputFilterTemplateDirective {
1010
constructor(public template: TemplateRef<any>) {}
11-
}
11+
}
12+
13+
@Directive({ selector: "[appTypeheadInputLoaderTmp]" })
14+
export class NgTypeHeadInputLoaderTemplateDirective {
15+
constructor(public template: TemplateRef<any>) {}
16+
}

‎projects/type-head-input/src/lib/type-head-input.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@
2828
[appNumbersOnly]="isNumberInput"
2929
(onClick)="onClick()"
3030
(onBlur)="setEmptyHandler()"
31+
[virtualScroll]="isVirtualScroll"
32+
[virtualScrollItemSize]="virtualScrollItemSize"
33+
[virtualScrollOptions]="virtualScrollOptions"
3134
>
3235
<!-- item template -->
3336
<ng-template *ngIf="!itemTemplate" let-option pTemplate="item">
@@ -48,6 +51,11 @@
4851
></ng-container>
4952
</ng-template>
5053

54+
<!-- override loader template -->
55+
<ng-template *ngIf="loaderTemplate" pTemplate="loader">
56+
<ng-container [ngTemplateOutlet]="loaderTemplate"></ng-container>
57+
</ng-template>
58+
5159
<!-- filter template -->
5260
<ng-template *ngIf="!filterTemplate" pTemplate="filter">
5361
<div

‎projects/type-head-input/src/lib/type-head-input.component.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@ import {
2222
import {
2323
NgTypeHeadInputFilterTemplateDirective,
2424
NgTypeHeadInputItemTemplateDirective,
25+
NgTypeHeadInputLoaderTemplateDirective,
2526
} from "./directive/form-template.directive";
26-
import { SelectItem } from "primeng/api";
27+
import { ScrollerOptions, SelectItem } from "primeng/api";
2728
import { UntypedFormControl } from "@angular/forms";
2829
import { Dropdown, DropdownChangeEvent } from "primeng/dropdown";
2930

@@ -59,6 +60,13 @@ export class TypeHeadInputComponent {
5960
@Input() isFormLabel = true;
6061
@Input() typeHeadStyleClass!: string;
6162
@Input() labelText!: string;
63+
@Input() isVirtualScroll: boolean = false;
64+
@Input() virtualScrollOptions: ScrollerOptions = {
65+
delay: 50,
66+
showLoader: true,
67+
lazy: true,
68+
};
69+
@Input() virtualScrollItemSize: number = 40;
6270
// eslint-disable-next-line @typescript-eslint/no-explicit-any
6371
selectedTypeHeadSource = new BehaviorSubject<any>(null);
6472
selectedTypeHead$ = this.selectedTypeHeadSource.asObservable();
@@ -73,6 +81,9 @@ export class TypeHeadInputComponent {
7381
@ContentChild(NgTypeHeadInputFilterTemplateDirective, { read: TemplateRef })
7482
// eslint-disable-next-line @typescript-eslint/no-explicit-any
7583
filterTemplate: TemplateRef<any> | undefined;
84+
@ContentChild(NgTypeHeadInputLoaderTemplateDirective, { read: TemplateRef })
85+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
86+
loaderTemplate: TemplateRef<any> | undefined;
7687

7788
//Extract label data
7889
optionLabels!: (string | undefined)[];
@@ -138,7 +149,7 @@ export class TypeHeadInputComponent {
138149
}
139150
}
140151

141-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
152+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
142153
onShowDropdown(event: any) {
143154
if (this.enableServerSideData) this.selectedTypeHeadSource.next(event);
144155
}

‎projects/type-head-input/src/lib/type-head-input.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { TypeHeadInputComponent } from "./type-head-input.component";
33
import {
44
NgTypeHeadInputFilterTemplateDirective,
55
NgTypeHeadInputItemTemplateDirective,
6+
NgTypeHeadInputLoaderTemplateDirective,
67
} from "./directive/form-template.directive";
78
import { DropdownModule } from "primeng/dropdown";
89
import { SkeletonModule } from "primeng/skeleton";
@@ -16,6 +17,7 @@ import { ValueFilterPipe } from "./pipe/value-filter.pipe";
1617
TypeHeadInputComponent,
1718
NgTypeHeadInputItemTemplateDirective,
1819
NgTypeHeadInputFilterTemplateDirective,
20+
NgTypeHeadInputLoaderTemplateDirective,
1921
NumbersOnlyDirective,
2022
FormControlPipe,
2123
ValueFilterPipe,
@@ -31,6 +33,7 @@ import { ValueFilterPipe } from "./pipe/value-filter.pipe";
3133
TypeHeadInputComponent,
3234
NgTypeHeadInputItemTemplateDirective,
3335
NgTypeHeadInputFilterTemplateDirective,
36+
NgTypeHeadInputLoaderTemplateDirective,
3437
NumbersOnlyDirective,
3538
DropdownModule,
3639
SkeletonModule,

0 commit comments

Comments
 (0)