ultimate-comparisons/ultimate-comparison-BASE

<table class="table-hover">
    <thead style="background-color: white;">
    <tr>
        <ng-template ngFor let-column [ngForOf]="columns" let-i="index">
            <th>
                <button (click)="orderClick($event, i)">
                    <iicon icon="keyboard-arrow-up" *ngIf="order[i]===-1; else elseif1">{{column}}</iicon>
                    <ng-template #elseif1>
                        <iicon icon="keyboard-arrow-down" *ngIf="order[i]===1; else elseif2">{{column}}</iicon>
                    </ng-template>
                    <ng-template #elseif2>
                        <iicon>{{column}}</iicon>
                    </ng-template>
                </button>
            </th>
        </ng-template>
        <th name="details" width="30px">
            <picon-button icon="settings" [showTooltip]="false" title="Settings"
                          (click)="settingsCallback.emit()"></picon-button>
        </th>
    </tr>
    </thead>
    <tbody>
    <ng-template ngFor let-item [ngForOf]="items" let-itemIndex="index">
        <tr>
            <ng-template ngFor let-entry [ngForOf]="item" let-i="index">
                <td *ngIf="types[i] === 'NAME_URL'"><a class="anchored"
                                                       href="{{entry.link}}"
                                                       target="_blank">{{entry.text}}</a>
                </td>
                <td *ngIf="types[i] === 'TEXT'">
                    {{entry.content}}
                </td>
                <td *ngIf="types[i] ===  'LABEL' || types[i] === 'REPOSITORY'">
                    <ng-template ngFor let-label [ngForOf]="entry?.labelArray">
                        <ptooltip [tooltip]="label.tooltip.text"
                                  [tooltipHtml]="label.tooltip.html" [position]="'n'">
                            <div class="label mylabel {{label.clazz}}" [style.color]="label.color"
                                 [style.background-color]="label.backgroundColor"
                                 (click)="labelClick($event, label, i)">
                                {{label.name}}
                            </div>
                        </ptooltip>
                        <ptooltip *ngIf="label == null"
                                  [tooltipHtml]="'There was no value for this field. Please submit one via pull request.'">
                            <div class="label mylabel unknown">unknown</div>
                        </ptooltip>
                    </ng-template>
                </td>

                <td *ngIf="types[i] === 'MARKDOWN'">
                    <div [innerHtml]="entry?.html | sanitizeHtml"></div>
                </td>
                <td *ngIf="types[i] === 'RATING'">
                    <iicon icon="star" *ngIf="entry?.rating">{{entry.rating}}
                    </iicon>
                </td>
            </ng-template>
            <td>
                <picon-button icon="info" [showTooltip]="false" title="Details"
                              (click)="showDetails.emit(index[itemIndex])"></picon-button>
            </td>
        </tr>
    </ng-template>
    </tbody>
</table>