Skip to content

Commit 9d1f157

Browse files
damyanpetevdamyanpetev
committed
refactor(*): re-run ng generate @angular/core:control-flow
1 parent 0171fd8 commit 9d1f157

4 files changed

Lines changed: 100 additions & 88 deletions

File tree

‎src/app/data-entries/select/select-header-footer/select-header-footer.component.html‎

Lines changed: 54 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,56 @@
11
<div class="header-footer-select-sample">
2-
<igx-select [overlaySettings]="{ outlet: element }">
3-
<label igxLabel>Pick your fruit</label>
4-
<igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" class="select__entry" [text]="fruit.type"
5-
[ngSwitch]="fruit.delivery">
6-
{{fruit.type}}
7-
<igx-icon *ngSwitchCase="'flight'">flight</igx-icon>
8-
<igx-icon *ngSwitchCase="'train'">train</igx-icon>
9-
<igx-icon *ngSwitchCase="'boat'">directions_boat</igx-icon>
10-
</igx-select-item>
11-
<ng-template igxSelectHeader>
12-
<div class="custom-select-header">
13-
<span class="sample-template-heading">DELIVERY METHOD</span>
14-
<igx-buttongroup (click)="filter($event.target)">
15-
<button igxButton title="flight">
16-
<igx-icon title="flight">flight</igx-icon>
17-
</button>
18-
<button igxButton title="train">
19-
<igx-icon title="train">train</igx-icon>
20-
</button>
21-
<button igxButton title="boat">
22-
<igx-icon title="boat">directions_boat</igx-icon>
23-
</button>
24-
</igx-buttongroup>
25-
</div>
26-
</ng-template>
27-
<ng-template igxSelectFooter>
28-
<div class="custom-select-footer">
29-
<span class="sample-template-heading">TOTAL</span>
30-
<div class="sample-template-icons">
31-
<span class="sample-template-icons__item">
32-
<igx-icon title="flight" [class.important-icon]="selected === 'flight'">flight</igx-icon>
33-
{{flightCount}}
34-
</span>
35-
<span class="sample-template-icons__item">
36-
<igx-icon title="train" [class.important-icon]="selected === 'train'">train</igx-icon>
37-
{{trainCount}}
38-
</span>
39-
<span class="sample-template-icons__item">
40-
<igx-icon title="boat" [class.important-icon]="selected === 'boat'">directions_boat</igx-icon>
41-
{{boatCount}}
42-
</span>
43-
</div>
44-
</div>
45-
</ng-template>
46-
</igx-select>
2+
<igx-select [overlaySettings]="{ outlet: element }">
3+
<label igxLabel>Pick your fruit</label>
4+
@for (fruit of fruits; track fruit) {
5+
<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
6+
{{fruit.type}}
7+
@switch (fruit.delivery) {
8+
@case ('flight') {
9+
<igx-icon>flight</igx-icon>
10+
}
11+
@case ('train') {
12+
<igx-icon>train</igx-icon>
13+
}
14+
@case ('boat') {
15+
<igx-icon>directions_boat</igx-icon>
16+
}
17+
}
18+
</igx-select-item>
19+
}
20+
<ng-template igxSelectHeader>
21+
<div class="custom-select-header">
22+
<span class="sample-template-heading">DELIVERY METHOD</span>
23+
<igx-buttongroup (click)="filter($event.target)">
24+
<button igxButton title="flight">
25+
<igx-icon title="flight">flight</igx-icon>
26+
</button>
27+
<button igxButton title="train">
28+
<igx-icon title="train">train</igx-icon>
29+
</button>
30+
<button igxButton title="boat">
31+
<igx-icon title="boat">directions_boat</igx-icon>
32+
</button>
33+
</igx-buttongroup>
34+
</div>
35+
</ng-template>
36+
<ng-template igxSelectFooter>
37+
<div class="custom-select-footer">
38+
<span class="sample-template-heading">TOTAL</span>
39+
<div class="sample-template-icons">
40+
<span class="sample-template-icons__item">
41+
<igx-icon title="flight" [class.important-icon]="selected === 'flight'">flight</igx-icon>
42+
{{flightCount}}
43+
</span>
44+
<span class="sample-template-icons__item">
45+
<igx-icon title="train" [class.important-icon]="selected === 'train'">train</igx-icon>
46+
{{trainCount}}
47+
</span>
48+
<span class="sample-template-icons__item">
49+
<igx-icon title="boat" [class.important-icon]="selected === 'boat'">directions_boat</igx-icon>
50+
{{boatCount}}
51+
</span>
52+
</div>
53+
</div>
54+
</ng-template>
55+
</igx-select>
4756
</div>

‎src/app/data-entries/select/select-header-footer/select-header-footer.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
22
import { IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxIconComponent, IgxSelectHeaderDirective, IgxButtonGroupComponent, IgxButtonDirective, IgxSelectFooterDirective } from 'igniteui-angular';
3-
import { NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
3+
44
@Component({
55
selector: 'app-select-header-footer',
66
styleUrls: ['select-header-footer.component.scss'],
77
templateUrl: 'select-header-footer.component.html',
8-
imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent, NgSwitch, NgSwitchCase, IgxIconComponent, IgxSelectHeaderDirective, IgxButtonGroupComponent, IgxButtonDirective, IgxSelectFooterDirective]
8+
imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxIconComponent, IgxSelectHeaderDirective, IgxButtonGroupComponent, IgxButtonDirective, IgxSelectFooterDirective]
99
})
1010
export class SelectHeaderFooterComponent implements OnInit {
1111
public flightCount: number;

‎src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.html‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
<div class="wrapper">
2-
<igx-query-builder #queryBuilder
3-
[entities]="entities"
4-
[expressionTree]="expressionTree">
5-
<igx-query-builder-header [title]="'Query Builder Template Sample'">
6-
</igx-query-builder-header>
7-
<ng-template #searchValueTemplate igxQueryBuilderSearchValue
8-
let-searchValue
9-
let-selectedField = "selectedField"
10-
let-selectedCondition = "selectedCondition"
11-
let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
12-
@if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
13-
<igx-select [placeholder]="'Select region'" [(ngModel)]="searchValue.value">
14-
<igx-select-item *ngFor="let reg of regionOptions" [value]="reg">{{ reg.text }}</igx-select-item>
15-
</igx-select>
16-
}
17-
@else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
18-
<igx-radio-group [(ngModel)]="searchValue.value">
19-
<igx-radio class="radio-sample" *ngFor="let stat of statusOptions" value="{{stat.value}}">
20-
{{stat.text}}
21-
</igx-radio>
22-
</igx-radio-group>
23-
}
24-
@else {
25-
<ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
26-
}
27-
</ng-template>
28-
</igx-query-builder>
29-
<div class="output-area">
30-
<pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
31-
</div>
2+
<igx-query-builder #queryBuilder
3+
[entities]="entities"
4+
[expressionTree]="expressionTree">
5+
<igx-query-builder-header [title]="'Query Builder Template Sample'">
6+
</igx-query-builder-header>
7+
<ng-template #searchValueTemplate igxQueryBuilderSearchValue
8+
let-searchValue
9+
let-selectedField = "selectedField"
10+
let-selectedCondition = "selectedCondition"
11+
let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
12+
@if (selectedField?.field === 'Region' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
13+
<igx-select [placeholder]="'Select region'" [(ngModel)]="searchValue.value">
14+
@for (reg of regionOptions; track reg) {
15+
<igx-select-item [value]="reg">{{ reg.text }}</igx-select-item>
16+
}
17+
</igx-select>
18+
}
19+
@else if (selectedField?.field === 'OrderStatus' && (selectedCondition === 'equals' || selectedCondition === 'doesNotEqual')){
20+
<igx-radio-group [(ngModel)]="searchValue.value">
21+
@for (stat of statusOptions; track stat) {
22+
<igx-radio class="radio-sample" value="{{stat.value}}">
23+
{{stat.text}}
24+
</igx-radio>
25+
}
26+
</igx-radio-group>
27+
}
28+
@else {
29+
<ng-container *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
30+
}
31+
</ng-template>
32+
</igx-query-builder>
33+
<div class="output-area">
34+
<pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
35+
</div>
3236
</div>

‎src/app/interactions/query-builder/query-builder-template-sample/query-builder-template-sample.component.ts‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NgForOf, NgTemplateOutlet } from '@angular/common';
1+
import { NgTemplateOutlet } from '@angular/common';
22
import { Component, OnInit } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
44
import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxComboModule, IgxNumberFilteringOperand, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioModule, IgxSelectModule, IgxStringFilteringOperand } from 'igniteui-angular';
@@ -8,16 +8,15 @@ import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxComboModu
88
styleUrls: ['./query-builder-template-sample.component.scss'],
99
templateUrl: 'query-builder-template-sample.component.html',
1010
imports: [
11-
IgxQueryBuilderComponent,
12-
IgxQueryBuilderHeaderComponent,
13-
IgxSelectModule,
14-
IgxRadioModule,
15-
IgxComboModule,
16-
FormsModule,
17-
IgxQueryBuilderSearchValueTemplateDirective,
18-
NgForOf,
19-
NgTemplateOutlet
20-
]
11+
IgxQueryBuilderComponent,
12+
IgxQueryBuilderHeaderComponent,
13+
IgxSelectModule,
14+
IgxRadioModule,
15+
IgxComboModule,
16+
FormsModule,
17+
IgxQueryBuilderSearchValueTemplateDirective,
18+
NgTemplateOutlet
19+
]
2120
})
2221
export class QueryBuilderTemplateSampleComponent implements OnInit {
2322
public shipViaFormatterData: any[];

0 commit comments

Comments
 (0)