I generate fields with loadFields(). All of them are successfully rendered in html in a row. But I need fields to be rendered separately depending on the group. To be able to group them and add a header. I tried doing it with *ngIf="item.group === 'group1'" but it doesn't work.
I was able to exclude a field before with *ngIf="item.key !== 'item1'"
loadFields() {
this.fields = {
item1: {
group: 'group1',
title: '',
type: 'text',
value: 'some value1',
validation: [Validators.required]
},
item2: {
group: 'group1',
title: '',
type: 'text',
value: 'some value2',
validation: [Validators.required]
},
item3: {
group: 'group2',
title: '',
type: 'text',
value: 'some value3',
validation: [Validators.required]
},
item4: {
group: 'group2',
title: '',
type: 'text',
value: 'some value4',
validation: [Validators.required]
},
}
}
originalOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
return 0;
}<ng-container *ngFor="let item of fields | keyvalue: originalOrder">
<div class="col-lg-12">
<legend class="h6">Group 1</legend>
<div class="col-lg-12" *ngIf="item.group === 'group1'">
<app-input-item
[complexForm]="langComplexForm"
[field]="item.value"
></app-input-item>
</div>
</div>
<div class="col-lg-12">
<legend class="h6">Group 2</legend>
<div class="col-lg-12" *ngIf="item.group === 'group2'">
<app-input-item
[complexForm]="langComplexForm"
[field]="item.value"
></app-input-item>
</div>
</div>
</ng-container>you can use ngSwitch https://angular.io/api/common/NgSwitch something like this:
<ng-container
*ngFor="let item of fields | keyvalue: originalOrder"
>
<div [ngSwitch]="item.group">
<div class="col-lg-12" *ngSwitchCase="'group1'">
<legend class="h6">Group 1</legend>
<div class="col-lg-12">
<app-input-item
[complexForm]="langComplexForm"
[field]="item.value"
></app-input-item>
</div>
</div>
<div class="col-lg-12" *ngSwitchCase="'group2'">
<legend class="h6">Group 2</legend>
<div class="col-lg-12">
<app-input-item
[complexForm]="langComplexForm"
[field]="item.value"
></app-input-item>
</div>
</div>
</div>
</ng-container>