G
G
Galdar Turin2020-07-24 16:15:42
JavaScript
Galdar Turin, 2020-07-24 16:15:42

How to hide empty blocks with cdkVirtualFor?

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

5f1adccdb5c54366895390.png

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>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question