How to hide empty blocks with cdkVirtualFor?

Question

JavaScript

Such here a problem, I deduce the list of objects but with such condition. contact.SEND must be true. As if everything is correct, the list is empty, but if you look at the HTML then:

HTML output

it can be seen that it displays a list of blocks and they are ordered, then it turns out that if I activate the 1st object and the last one, only the first one will appear in the list, and I will have to scroll to the last one right to the end ...

Actually the question. How to achieve such a result that all activated objects were displayed at the beginning. Or you will have to display a separate array with the selected objects, which is not very desirable.

HTML

<cdk-virtual-scroll-viewport itemSize="10" cdkScrollable >

        <div *cdkVirtualFor="let contact of contactsSelect | search:'listContactsType':searchStr" appAltInfo>

            <div *ngIf="+contact.SEND" class="boxContact" (dblclick)="removeContact(contact.ID)">

                <div class="main-info">
                    <div class="typeName" >{{ contact.NAME }} {{ contact.LAST_NAME }}</div>
                    <button (click)="removeContact(contact.ID)"><fa-icon class="fa-spin" [icon]="faMinus"></fa-icon></button>
                </div>

                <div class="add-info">
                    {{ contact.STR_PHONE }}
                </div>

            </div>

        </div>

    </cdk-virtual-scroll-viewport>