Using collapse in listview items not removing the space for particular item view entirely

Question

• In listview items I'm using Visiblity concept in layout to perform visible and collapse. When performing Collapse, listview items not removing that view entirely from the layout.

• It is removing the item contents such as name and id but placing blank white view at that particular listitem position in listview.

• Below I have shared the codes for better understanding:

StudentData.ts :

export class StudentData {

constructor(public id: number, public name: string, public collapseData: boolean) {}

} 

student.page.html:

 <ListView id="listId" [items]="allFeedItems" class="list-group" height="300">
        <ng-template let-item="item">
            <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" >

                <StackLayout orientation="horizontal">
                <Label class="item-address" text="address"></Label>
            </StackLayout>
                .....

            </StackLayout>
        </ng-template>
    </ListView>        

What is happening:

For eg: in modal class, I'm saving switch control values for listitems in hashmap. when coming back to my main page (i.e)StudentPage, I need to hide the particular row item entirely. But it is removing only the contents name and id. It's not removing the blank view for that particular listview item position.

What I'm expecting :

To remove the blank view for that particular item position in listview.

Kibitka

ng-template ---> ng-container or move your let-item into <StackLayout> – Displayed

@Z.Bagley getting error let is only supported in template elements – Kibitka

That's my bad, not used to using let-item much. The general problem is that 'ng-template' is built into the DOM. Adding [hidden]="!item.collapseData" should do the trick (or just "item.collapseData") – Displayed

@Z.Bagley hidden doesn't worked for me.it doesn't remove the view entirely.Same issue occurred again. – Kibitka

Showing what's rendered to DOM might help – Displayed

@Steve did u try with renderer2 .its the last thing you can try if ng-template or hidden dosent work – Rabbit

Hi @Steve, did you check if the item is influenced by a CSS style? like a display: block property or something related to it. – Endres

Answer 1

as mentioned in the comment by dashman. I have added the visibility inside the child stacklayout instead of parent stacklayout. Then it doesn't took the blank white space for the particular listitem.

<ng-template let-item="item">
  <StackLayout>

    <StackLayout [visibility]="item.collapseData ? 'visible' : 'collapse'" orientation="horizontal">
      <Label class="item-address" text="address"></Label>
    </StackLayout>
    .....

  </StackLayout>
</ng-template>

Kibitka

Answer 2

You should Use different templates for that -

<ListView [items]="items" [itemTemplateSelector]="templateSelector">
<template nsTemplateKey="big" let-item="item">
<!-- big item template -->
</template>
<template nsTemplateKey="small" let-item="item">
<!-- small item with image -->
</template>
<template nsTemplateKey="small-no-image" let-item="item">
<!-- small item with no image -->
</template>
</ListView>

and TS code -

public templateSelector(item: NewsItem, index: number, items: 
NewsItem[]) {
if (item.type === "big") {
return "big"
} 

if (item.type === "small" && item.imageUrl) {
return "small";
}
if (item.type === "small" && item.imageUrl) {
return "small-no-image";
}

throw new Error("Unrecognized template!")
}

for more Info Read Here - https://medium.com/@alexander.vakrilov/faster-nativescript-listview-with-multiple-item-templates-8f903a32e48f

Elaterin