sample.component.html

<div class="list-sample">
    <article class="sample-column" [style.width]="'500px'">
        <h4 class="sample-title">Performance sample</h4>

        <igx-input-group type="search" style="margin-bottom: 16px">
            <igx-prefix>
                <igx-icon>search</igx-icon>
            </igx-prefix>
            <input #searchContacts igxInput type="text" placeholder="Search Contacts" [(ngModel)]="search1">
            <igx-suffix *ngIf="searchContacts.value.length > 0" (click)="search1 = ''">
                <igx-icon>clear</igx-icon>
            </igx-suffix>
        </igx-input-group>

        <igx-list>
            <igx-list-item [isHeader]="true">Contacts</igx-list-item>
            <div class="virtualized-items">
                <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item" *igxFor="let item of data | igxFilter: fo1; scrollOrientation : 'vertical'; containerSize: '500px'; itemSize: '50px'">
                    <div class="item">
                        <igx-avatar [src]="item.avatar" roundShape="true"></igx-avatar>
                        <span igxLabel>{{item.text}}</span>
                        <igx-icon name="star" [class.favorite]="item.favorite"></igx-icon>
                    </div>
                </igx-list-item>
            </div>
        </igx-list>

    </article>
</div>