src/app/components/logs-viewer/logs-viewer.component.html

<div style="height: 100%;">
    <div *ngIf="logs_loading" style="z-index: 999; position: absolute; top: 40%; left: 50%">
        <mat-spinner [diameter]="32"></mat-spinner>
    </div>
    <!-- Virtual mode (fast, select text buggy) -->
    <!--<cdk-virtual-scroll-viewport style="height: 274px;" itemSize="50" class="example-viewport">
        <div *cdkVirtualFor="let log of logs; let i = index" class="example-item">
            <span [ngStyle]="{'color':log.color}">{{log.text}}</span>
        </div>
    </cdk-virtual-scroll-viewport>-->

    <!-- Non-virtual mode (slow, bug-free) -->
    <div style="height: 100%; overflow-y: auto">
        <div *ngFor="let log of logs; let i = index" class="example-item">
            <span [ngStyle]="{'color':log.color}">{{log.text}}</span>
        </div>
    </div>

    <div>
        <button style="position: absolute; right: 0px; top: 12px;" [cdkCopyToClipboard]="logs_text" (click)="copiedLogsToClipboard()" mat-mini-fab color="primary"><mat-icon style="font-size: 22px !important;">content_copy</mat-icon></button>
        <div style="display: inline-block;">
            <ng-container i18n="Label for lines select in logger view">Lines:</ng-container>&nbsp;
            <mat-form-field style="width: 75px;">
                <mat-select (selectionChange)="getLogs()" [(ngModel)]="requested_lines">
                    <mat-option [value]="10">10</mat-option>
                    <mat-option [value]="25">25</mat-option>
                    <mat-option [value]="50">50</mat-option>
                    <mat-option [value]="100">100</mat-option>
                    <mat-option [value]="0">All</mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <span class="spacer"></span>
        <button style="float: right; margin-top: 12px;" (click)="clearLogs()" mat-stroked-button color="warn"><ng-container i18n="Clear logs button">Clear logs</ng-container></button>
    </div>
    
</div>