Skip to content

Commit b964bb4

Browse files
ChronosSFChronosSF
authored
Merge pull request #3918 from IgniteUI/vnext
Update samples for grid lite with angular wrapper (#3916)
2 parents 847dee6 + 4915180 commit b964bb4

File tree

41 files changed

+709
-532
lines changed

Some content is hidden

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

41 files changed

+709
-532
lines changed

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html‎

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,73 @@
11
<div class="grid-lite-wrapper">
22
<section class="panel">
3-
<button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
4-
Column Properties
5-
</button>
6-
<igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
7-
@for (column of columns; track column) {
3+
<button igxButton="outlined" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">
4+
Column Properties
5+
</button>
6+
<igx-drop-down #dropdown [isOverlay]="true" [autoClose]="false" [closed]="false">
7+
@for (column of columns; track column) {
88
<igx-drop-down-item>
9-
<div class="config">
10-
<span class="config-key">{{ column.header }}</span>
11-
<igx-checkbox
12-
#hiddenChk
13-
[checked]="column.hidden"
14-
(click)="$event.stopPropagation()"
15-
(change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
16-
Hidden
17-
</igx-checkbox>
18-
<igx-checkbox
19-
#resizableChk
20-
[checked]="column.resizable"
21-
(click)="$event.stopPropagation()"
22-
(change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
23-
Resizable
24-
</igx-checkbox>
25-
<igx-checkbox
26-
#filterChk
27-
[checked]="column.filterable"
28-
(click)="$event.stopPropagation()"
29-
(change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
30-
Filter
31-
</igx-checkbox>
32-
<igx-checkbox
33-
#sortableChk
34-
[checked]="column.sortable"
35-
(click)="$event.stopPropagation()"
36-
(change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
37-
Sort
38-
</igx-checkbox>
39-
</div>
9+
<div class="config">
10+
<span class="config-key">{{ column.header }}</span>
11+
<igx-checkbox #hiddenChk [checked]="column.hidden" (click)="$event.stopPropagation()"
12+
(change)="toggleColumnProperty(column, 'hidden', hiddenChk.checked)">
13+
Hidden
14+
</igx-checkbox>
15+
<igx-checkbox #resizableChk [checked]="column.resizable" (click)="$event.stopPropagation()"
16+
(change)="toggleColumnProperty(column, 'resizable', resizableChk.checked)">
17+
Resizable
18+
</igx-checkbox>
19+
<igx-checkbox #filterChk [checked]="column.filterable" (click)="$event.stopPropagation()"
20+
(change)="toggleColumnProperty(column, 'filterable', filterChk.checked)">
21+
Filter
22+
</igx-checkbox>
23+
<igx-checkbox #sortableChk [checked]="column.sortable" (click)="$event.stopPropagation()"
24+
(change)="toggleColumnProperty(column, 'sortable', sortableChk.checked)">
25+
Sort
26+
</igx-checkbox>
27+
</div>
4028
</igx-drop-down-item>
41-
}
42-
</igx-drop-down>
29+
}
30+
</igx-drop-down>
4331

44-
<igx-switch
45-
labelPosition="before"
46-
[checked]="hasFormatters"
47-
(igxChange)="toggleFormatters($event)">
48-
Value formatters:
49-
</igx-switch>
32+
<igx-switch labelPosition="before" [checked]="hasFormatters" (change)="toggleFormatters($event)">
33+
Value formatters:
34+
</igx-switch>
5035
</section>
5136

52-
<igc-grid-lite [data]="data">
37+
<igx-grid-lite [data]="data">
5338
@for (col of columns; track col) {
54-
<igc-grid-lite-column
55-
[field]="col.field"
56-
[header]="col.header"
57-
[dataType]="col.dataType"
58-
[hidden]="col.hidden"
59-
[resizable]="col.resizable"
60-
[sortable]="col.sortable"
61-
[filterable]="col.filterable"
62-
[cellTemplate]="col.field === 'price' || col.field === 'total'
63-
? (hasFormatters ? formatCurrency : undefined)
64-
: (col.field === 'rating' ? ratingTemplate : undefined)">
65-
</igc-grid-lite-column>
39+
40+
<!-- Rating column -->
41+
@if (col.field === 'rating') {
42+
<igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
43+
[resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
44+
45+
<ng-template igxGridLiteCell let-value>
46+
<igc-rating [value]="value" readonly step="0.01" min="0" max="5">
47+
</igc-rating>
48+
</ng-template>
49+
50+
</igx-grid-lite-column>
51+
}
52+
53+
<!-- Currency columns -->
54+
@else if (col.field === 'price' || col.field === 'total') {
55+
<igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
56+
[resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
57+
58+
<ng-template igxGridLiteCell let-value>
59+
{{ hasFormatters ? formatCurrency(value) : value }}
60+
</ng-template>
61+
62+
</igx-grid-lite-column>
63+
}
64+
65+
<!-- All other columns (NO template) -->
66+
@else {
67+
<igx-grid-lite-column [field]="col.field" [header]="col.header" [hidden]="col.hidden" [dataType]="col.dataType"
68+
[resizable]="col.resizable" [sortable]="col.sortable" [filterable]="col.filterable">
69+
</igx-grid-lite-column>
70+
}
6671
}
67-
</igc-grid-lite>
68-
</div>
72+
</igx-grid-lite>
73+
</div>

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
height: 100%;
2929
}
3030

31-
igc-grid-lite {
31+
igx-grid-lite {
3232
min-height: 65vh;
3333
--ig-size: 2;
3434
}

‎src/app/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,64 @@ import { CommonModule } from '@angular/common';
33
import { IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
44
import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
55
import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down';
6-
import { IgcGridLite } from 'igniteui-grid-lite';
76
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
87
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
8+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteColumnConfiguration } from 'igniteui-angular/grids/lite';
9+
import { IgxSwitchComponent } from 'igniteui-angular/switch';
910

10-
IgcGridLite.register();
1111
defineComponents(IgcRatingComponent);
1212

1313
@Component({
14-
selector: 'app-grid-lite-column-config-dynamic',
15-
templateUrl: './grid-lite-column-config-dynamic.component.html',
16-
styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
17-
imports: [
18-
CommonModule,
19-
IgxButtonDirective,
20-
IgxToggleActionDirective,
21-
IgxDropDownItemNavigationDirective,
22-
IgxDropDownComponent,
23-
IgxDropDownItemComponent,
24-
IgxCheckboxComponent
25-
],
26-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27-
standalone: true
14+
selector: 'app-grid-lite-column-config-dynamic',
15+
templateUrl: './grid-lite-column-config-dynamic.component.html',
16+
styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
17+
imports: [
18+
CommonModule,
19+
IgxGridLiteComponent,
20+
IgxGridLiteColumnComponent,
21+
IgxGridLiteCellTemplateDirective,
22+
IgxButtonDirective,
23+
IgxToggleActionDirective,
24+
IgxDropDownItemNavigationDirective,
25+
IgxDropDownComponent,
26+
IgxDropDownItemComponent,
27+
IgxCheckboxComponent,
28+
IgxSwitchComponent
29+
],
30+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
31+
standalone: true
2832
})
2933
export class GridLiteColumnConfigDynamicComponent implements OnInit {
30-
private dataService = inject(GridLiteDataService);
34+
private dataService = inject(GridLiteDataService);
3135

32-
public data: ProductInfo[] = [];
33-
public hasFormatters = true;
36+
public data: ProductInfo[] = [];
37+
public hasFormatters = true;
3438

35-
public columns = [
36-
{ field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false },
37-
{ field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false },
38-
{ field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false },
39-
{ field: 'sold', header: 'Units sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
40-
{ field: 'total', header: 'Total sold', hidden: false, resizable: true, sortable: false, filterable: false },
41-
{ field: 'rating', header: 'Customer rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
42-
];
39+
public columns: IgxGridLiteColumnConfiguration<ProductInfo>[] = [
40+
{ field: 'id', header: 'ID', hidden: true, resizable: true, sortable: false, filterable: false, dataType: 'string'},
41+
{ field: 'name', header: 'Product Name', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'string'},
42+
{ field: 'price', header: 'Price', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
43+
{ field: 'sold', header: 'Units Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
44+
{ field: 'total', header: 'Total Sold', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' },
45+
{ field: 'rating', header: 'Customer Rating', hidden: false, resizable: true, sortable: false, filterable: false, dataType: 'number' }
46+
];
4347

44-
public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
48+
public formatter = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
4549

46-
ngOnInit() {
47-
this.data = this.dataService.generateProducts(50);
48-
}
50+
ngOnInit() {
51+
this.data = this.dataService.generateProducts(50);
52+
}
4953

50-
protected formatCurrency = (params: any) => this.formatter.format(params.value);
54+
protected formatCurrency = (value: number) =>
55+
this.formatter.format(value);
5156

52-
protected ratingTemplate = (params: any) => {
53-
const rating = document.createElement('igc-rating');
54-
rating.setAttribute('readonly', '');
55-
rating.setAttribute('step', '0.01');
56-
rating.setAttribute('value', params.value.toString());
57-
return rating;
58-
};
57+
toggleColumnProperty(column: any, property: string, value: boolean) {
58+
column[property] = value;
59+
// Trigger Angular change detection
60+
this.columns = [...this.columns];
61+
}
5962

60-
toggleColumnProperty(column: any, property: string, value: boolean) {
61-
column[property] = value;
62-
// Trigger Angular change detection
63-
this.columns = [...this.columns];
64-
}
65-
66-
toggleFormatters(event: any) {
67-
this.hasFormatters = event.detail.checked;
68-
}
63+
toggleFormatters(event: any) {
64+
this.hasFormatters = event.checked;
65+
}
6966
}

‎src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
<div class="grid-lite-wrapper">
2-
<igc-grid-lite [data]="data">
3-
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
4-
<igc-grid-lite-column field="price" header="Price (€)" data-type="number"></igc-grid-lite-column>
5-
<igc-grid-lite-column field="sold" header="Units Sold" data-type="number"></igc-grid-lite-column>
6-
<igc-grid-lite-column field="total" header="Total Revenue" data-type="number"></igc-grid-lite-column>
7-
<igc-grid-lite-column field="rating" header="Customer Rating ⭐" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
8-
</igc-grid-lite>
2+
<igx-grid-lite [data]="data">
3+
<igx-grid-lite-column field="name" header="Product Name"></igx-grid-lite-column>
4+
<igx-grid-lite-column field="price" header="Price (€)" dataType="number"></igx-grid-lite-column>
5+
<igx-grid-lite-column field="sold" header="Units Sold" dataType="number"></igx-grid-lite-column>
6+
<igx-grid-lite-column field="total" header="Total Revenue" dataType="number"></igx-grid-lite-column>
7+
<igx-grid-lite-column field="rating" dataType="number">
8+
<ng-template igxGridLiteHeader let-value>
9+
<h3>⭐ Rating ⭐</h3>
10+
</ng-template>
11+
12+
<ng-template igxGridLiteCell let-value>
13+
<igc-rating [value]="value" readonly step="0.01" min="0" max="5">
14+
</igc-rating>
15+
</ng-template>
16+
</igx-grid-lite-column>
17+
</igx-grid-lite>
918
</div>

‎src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
height: 100%;
99
}
1010

11-
igc-grid-lite {
11+
igx-grid-lite {
1212
min-height: 65vh;
1313
}

‎src/app/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
4-
import { IgcGridLite } from 'igniteui-grid-lite';
54
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
5+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite';
66

7-
IgcGridLite.register();
87
defineComponents(IgcRatingComponent);
98

109
@Component({
11-
selector: 'app-grid-lite-column-config-headers',
12-
templateUrl: './grid-lite-column-config-headers.component.html',
13-
styleUrls: ['./grid-lite-column-config-headers.component.scss'],
14-
imports: [CommonModule],
15-
schemas: [CUSTOM_ELEMENTS_SCHEMA]
10+
selector: 'app-grid-lite-column-config-headers',
11+
templateUrl: './grid-lite-column-config-headers.component.html',
12+
styleUrls: ['./grid-lite-column-config-headers.component.scss'],
13+
imports: [
14+
CommonModule,
15+
IgxGridLiteComponent,
16+
IgxGridLiteColumnComponent,
17+
IgxGridLiteCellTemplateDirective,
18+
IgxGridLiteHeaderTemplateDirective
19+
],
20+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
1621
})
1722
export class GridLiteColumnConfigHeadersComponent implements OnInit {
18-
private dataService = inject(GridLiteDataService);
23+
private dataService = inject(GridLiteDataService);
1924

20-
public data: ProductInfo[] = [];
25+
public data: ProductInfo[] = [];
2126

22-
ngOnInit() {
23-
this.data = this.dataService.generateProducts(50);
24-
}
25-
26-
protected ratingTemplate = (params: any) => {
27-
const rating = document.createElement('igc-rating');
28-
rating.setAttribute('readonly', '');
29-
rating.setAttribute('step', '0.01');
30-
rating.setAttribute('value', params.value.toString());
31-
return rating;
32-
};
27+
ngOnInit() {
28+
this.data = this.dataService.generateProducts(50);
29+
}
3330
}

‎src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
<div class="grid-lite-wrapper">
2-
<igc-grid-lite [data]="data">
3-
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
4-
<igc-grid-lite-column field="price" header="Price" data-type="number" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
5-
<igc-grid-lite-column field="sold" header="Units sold" data-type="number"></igc-grid-lite-column>
6-
<igc-grid-lite-column field="total" header="Total sold" [cellTemplate]="formatCurrency"></igc-grid-lite-column>
7-
<igc-grid-lite-column field="rating" header="Customer rating" data-type="number" [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
8-
</igc-grid-lite>
2+
<igx-grid-lite [data]="data">
3+
<igx-grid-lite-column field="name" header="Product Name"></igx-grid-lite-column>
4+
<igx-grid-lite-column field="price" header="Price" dataType="number">
5+
<ng-template igxGridLiteCell let-value>
6+
{{formatCurrency(value)}}
7+
</ng-template>
8+
</igx-grid-lite-column>
9+
<igx-grid-lite-column field="sold" header="Units Sold" dataType="number"></igx-grid-lite-column>
10+
<igx-grid-lite-column field="total" header="Total sold">
11+
<ng-template igxGridLiteCell let-value>
12+
{{formatCurrency(value)}}
13+
</ng-template>
14+
</igx-grid-lite-column>
15+
<igx-grid-lite-column field="rating" header="Customer Rating" dataType="number">
16+
<ng-template igxGridLiteCell let-value>
17+
<igc-rating
18+
[value]="value"
19+
readonly
20+
min="0"
21+
max="5">
22+
</igc-rating>
23+
</ng-template>
24+
</igx-grid-lite-column>
25+
</igx-grid-lite>
926
</div>

‎src/app/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
height: 100%;
99
}
1010

11-
igc-grid-lite {
11+
igx-grid-lite {
1212
min-height: 65vh;
1313
}

0 commit comments

Comments
 (0)