NativeScript angular not displaying items at right position

Question

I've a list of categories which consists of category items which I'd like to display as:

Category 1
- List item
- List item
Category 2
- List item
- List item

NativeScript is rendering the output as the following;

Category 2
- List item
- List item
- List item
- List item

Code:

<ActionBar class="action-bar" title="Filter">
    <ActionItem tap="onSaveFilter" icon="res://done" android.position="actionBar"></ActionItem>
</ActionBar>

<StackLayout class="page page-content" orientation="vertical">

    <ng-container *ngFor="let category of filter.categoryFilterItems">
        <Label class="filter-category-title" text="{{ category.name }} - {{ category.filterItemModels.length }}"></Label>

        <ng-container *ngFor="let filterItem of category.filterItemModels">
            <DockLayout class="filter-item" stretchLastChild="false" *ngIf="filterItem.isVisible()">
                <Label class="filter-title" text="{{ category.name }} -  {{ filterItem.name}}" dock="left"></Label>

                <ng-container [ngSwitch]="filterItem.controlType">

                    <StackLayout *ngSwitchCase="FilterItemControlType.Textbox">
                        <Label [text]="filterItem.value | date"></Label>
                        <Label class="fa" text="&#xf073;"></Label>
                    </StackLayout>

                    <DropDown *ngSwitchCase="FilterItemControlType.Dropdown" backroundColor="white"
                        [items]="filterItem.options" (selectedIndexChanged)="filterItem.onSelectedIndexChange($event)"
                        row="0" colSpan="2" dock="right">
                    </DropDown>

                </ng-container>

            </DockLayout>
        </ng-container>

    </ng-container>

</StackLayout>

If I manually create the filter items like below, it works just fine.

<Label class="filter-category-title" text="Algemeen"></Label>

<DockLayout class="filter-item" stretchLastChild="false">
    <Label class="filter-title" text="Beurs" dock="left"></Label>
    <DropDown #country backroundColor="white" [items]="exchangeOptions" (selectedIndexChanged)="onExchangeChange($event)"
        row="0" colSpan="2" dock="right"></DropDown>
</DockLayout>

Jamie Jamie · Accepted Answer · 2019-09-07T09:33:56

Turns out, instead of a ng-container I had to use StackLayout..

<ActionBar class="action-bar" title="Filter">
    <ActionItem tap="onSaveFilter" icon="res://done" android.position="actionBar"></ActionItem>
</ActionBar>

<StackLayout class="page page-content" orientation="vertical">

    <StackLayout *ngFor="let category of filter.categoryFilterItems">
        <Label class="filter-category-title" text="{{ category.name }} - {{ category.filterItemModels.length }}"></Label>

        <ng-container *ngFor="let filterItem of category.filterItemModels">
            <DockLayout class="filter-item" stretchLastChild="false" *ngIf="filterItem.isVisible()">
                <Label class="filter-title" text="{{ category.name }} -  {{ filterItem.name}}" dock="left"></Label>

                <ng-container [ngSwitch]="filterItem.controlType">

                    <StackLayout *ngSwitchCase="FilterItemControlType.Textbox" dock="right" orientation="horizontal">
                        <Label [text]="filterItem.value | date"></Label>
                        <Label class="fa" text="&#xf073;"></Label>
                    </StackLayout>

                    <DropDown *ngSwitchCase="FilterItemControlType.Dropdown" backroundColor="white"
                        [items]="filterItem.options" (selectedIndexChanged)="filterItem.onSelectedIndexChange($event)"
                        row="0" colSpan="2" dock="right">
                    </DropDown>

                </ng-container>

            </DockLayout>
        </ng-container>

    </StackLayout>

</StackLayout>

NativeScript angular not displaying items at right position

1 Answers