Skip to content

Commit b183539

Browse files
Mariela TihovaMariela Tihova
Mariela Tihova
authored and
Mariela Tihova
committed
feat(grid-lite-styling): update samples with the new angular wrappers
1 parent 876a09b commit b183539

4 files changed

Lines changed: 48 additions & 45 deletions

File tree

‎src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.html‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,16 @@
11
<div class="grid-lite-wrapper">
2-
<section class="theme-switcher">
3-
<igc-switch
4-
[checked]="theme === 'light'"
5-
(igcChange)="switchTheme()"
6-
label-position="before">
7-
Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme
8-
</igc-switch>
9-
</section>
10-
11-
<igc-grid-lite
12-
[class.custom-light]="theme === 'light'"
13-
[class.custom-dark]="theme === 'dark'"
14-
[data]="data">
15-
<igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
16-
<igc-grid-lite-column field="price" header="Price" data-type="number" sortable filterable></igc-grid-lite-column>
17-
<igc-grid-lite-column field="sold" header="Sold" data-type="number" sortable filterable></igc-grid-lite-column>
18-
<igc-grid-lite-column field="total" header="Total" data-type="number" sortable filterable></igc-grid-lite-column>
19-
<igc-grid-lite-column field="rating" header="Rating" data-type="number" sortable filterable></igc-grid-lite-column>
20-
</igc-grid-lite>
2+
<section class="theme-switcher">
3+
<igx-switch labelPosition="before" [checked]="theme === 'light'" (change)="switchTheme()">
4+
Switch to {{ theme === 'dark' ? 'light' : 'dark' }} theme
5+
</igx-switch>
6+
</section>
7+
8+
<igx-grid-lite [class.custom-light]="theme === 'light'" [class.custom-dark]="theme === 'dark'" [data]="data">
9+
<igx-grid-lite-column field="name" header="Product" sortable filterable></igx-grid-lite-column>
10+
<igx-grid-lite-column field="price" header="Price" dataType="number" sortable filterable></igx-grid-lite-column>
11+
<igx-grid-lite-column field="sold" header="Sold" dataType="number" sortable filterable></igx-grid-lite-column>
12+
<igx-grid-lite-column field="total" header="Total" dataType="number" sortable filterable></igx-grid-lite-column>
13+
<igx-grid-lite-column field="rating" header="Rating" dataType="number" sortable
14+
filterable></igx-grid-lite-column>
15+
</igx-grid-lite>
2116
</div>

‎src/app/grid-lite/grid-lite-styling-custom/grid-lite-styling-custom.component.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject, ViewEncapsulation } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
4-
import { IgcGridLite } from 'igniteui-grid-lite';
54
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
5+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
6+
import { IgxSwitchComponent } from 'igniteui-angular/switch';
67

7-
IgcGridLite.register();
88
defineComponents(IgcSwitchComponent);
99

1010
@Component({
1111
selector: 'app-grid-lite-styling-custom',
1212
templateUrl: './grid-lite-styling-custom.component.html',
1313
styleUrls: ['./grid-lite-styling-custom.component.scss'],
1414
encapsulation: ViewEncapsulation.None,
15-
imports: [CommonModule],
15+
imports: [
16+
CommonModule,
17+
IgxGridLiteComponent,
18+
IgxGridLiteColumnComponent,
19+
IgxSwitchComponent
20+
],
1621
schemas: [CUSTOM_ELEMENTS_SCHEMA]
1722
})
1823
export class GridLiteStylingCustomComponent implements OnInit {

‎src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
<div class="grid-lite-wrapper">
22
<section class="theme-selector">
3-
<igc-select
3+
<igx-select
44
flip
55
[value]="selectedTheme"
66
label="Select a theme:"
7-
(igcChange)="updateTheme($event)">
7+
(change)="updateTheme($event)">
88
@for (theme of themes; track theme) {
9-
<igc-select-item [value]="theme">{{ theme }}</igc-select-item>
9+
<igx-select-item [value]="theme">{{ theme }}</igx-select-item>
1010
}
11-
</igc-select>
11+
</igx-select>
1212
</section>
1313

14-
<igc-grid-lite
14+
<igx-grid-lite
1515
[attr.data-theme]="selectedTheme"
1616
[data]="data">
17-
<igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
18-
<igc-grid-lite-column field="price" header="Price per item" data-type="number" sortable filterable></igc-grid-lite-column>
19-
<igc-grid-lite-column field="sold" header="Items sold" data-type="number" sortable filterable></igc-grid-lite-column>
20-
<igc-grid-lite-column field="total" header="Total" data-type="number" sortable filterable></igc-grid-lite-column>
21-
<igc-grid-lite-column field="rating" header="User rating" data-type="number" sortable filterable [cellTemplate]="ratingTemplate"></igc-grid-lite-column>
22-
</igc-grid-lite>
17+
<igx-grid-lite-column field="name" header="Product" sortable filterable></igx-grid-lite-column>
18+
<igx-grid-lite-column field="price" header="Price per item" dataType="number" sortable filterable></igx-grid-lite-column>
19+
<igx-grid-lite-column field="sold" header="Items sold" dataType="number" sortable filterable></igx-grid-lite-column>
20+
<igx-grid-lite-column field="total" header="Total" dataType="number" sortable filterable></igx-grid-lite-column>
21+
<igx-grid-lite-column field="rating" header="User rating" dataType="number" sortable filterable>
22+
<ng-template igxGridLiteCell let-value>
23+
<igc-rating [value]="value" readonly step="0.01" min="0" max="5"></igc-rating>
24+
</ng-template>
25+
</igx-grid-lite-column>
26+
</igx-grid-lite>
2327
</div>

‎src/app/grid-lite/grid-lite-styling-themes/grid-lite-styling-themes.component.ts‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { defineComponents, IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent } from 'igniteui-webcomponents';
4-
import { IgcGridLite } from 'igniteui-grid-lite';
54
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
5+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
6+
import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
67

7-
IgcGridLite.register();
8-
defineComponents(IgcRatingComponent, IgcSelectComponent, IgcSelectItemComponent);
8+
defineComponents(IgcRatingComponent);
99

1010
@Component({
1111
selector: 'app-grid-lite-styling-themes',
1212
templateUrl: './grid-lite-styling-themes.component.html',
1313
styleUrls: ['./grid-lite-styling-themes.component.scss'],
14-
imports: [CommonModule],
14+
imports: [
15+
CommonModule,
16+
IgxGridLiteComponent,
17+
IgxGridLiteColumnComponent,
18+
IgxSelectComponent,
19+
IgxSelectItemComponent
20+
],
1521
schemas: [CUSTOM_ELEMENTS_SCHEMA]
1622
})
1723
export class GridLiteStylingThemesComponent implements OnInit {
@@ -34,14 +40,7 @@ export class GridLiteStylingThemesComponent implements OnInit {
3440
this.data = this.dataService.generateProducts(50);
3541
}
3642

37-
protected ratingTemplate = (params: any) => {
38-
const rating = document.createElement('igc-rating');
39-
rating.setAttribute('readonly', '');
40-
rating.setAttribute('value', params.value.toString());
41-
return rating;
42-
};
43-
4443
updateTheme(event: any) {
45-
this.selectedTheme = event.detail.value;
44+
this.selectedTheme = event.value;
4645
}
4746
}

0 commit comments

Comments
 (0)