Virtual Scroll - Remove/Hide footer from the list


I try to remove a footer in virtual scroll.

<ion-list [virtualScroll]="arrayArticles" approxItemHeight="200px"
              approxHeaderHeight="0px" approxFooterHeight="0px"
        <ion-card  *virtualItem="let article;let idx = index" (click)="itemTapped($event, article)" 
                  (swipe)="articleSwipeEvent(article,$event, idx)" >
            <ion-img [src]="article.imageSrc" class="listImg" (load)="logDebug()" ></ion-img>
            <div [innerHTML]="article.title"></div>
            <div [innerHTML]="(article.publishedDate | amTimeAgo) + ' on ' + article.sourceTitle"></div>
        <ion-card [ngClass]="{'hideIonCard': Footer_Show == false}"  *virtualFooter="let footer"
            <img src="../../../img/smart.jpg" class="listImg">
                <p>My Ion-car when index=10</p>

            <ion-item class="bottom">
                <button light clear item-left (click)="RemoveCard_Footer()">


I use footer to add a specific card when index=10

the function RemoveCard_Footer() set Footer_Show= false.

I hide the footer with [ngClass]="{‘hideIonCard’: Footer_Show == false}"

.hideIonCard { display:none; }

=> item disappears from the list, the scroll position is retained. But the next elements does not go up in the list, there is blank space.

How can i remove footer dynamically?

or may be a better solution to add this specific card at index 10 and remove it from the list.