ultimate-comparisons/ultimate-comparison-BASE

<div class="pheader">
    <h2>{{data.name}}
        <ng-template ngFor let-label [ngForOf]="headerLabels">
            <ptooltip [tooltip]="label.tooltip.text"
                      [tooltipHtml]="prefixInternalLink(label.tooltip.html)" [position]="'s'">
                <div class="label mylabel {{label.clazz}}" [style.color]="label.color"
                     [style.background-color]="label.backgroundColor">
                    {{label.name}}
                </div>
            </ptooltip>
        </ng-template>
        <small><a href="{{data.url}}" target="_blank">{{data.url}}</a></small>
    </h2>
</div>
<div class="grid-content">
    <pcard *ngIf="descriptionData" heading="{{bodyTitle}}" class="description">
        <div *ngIf="descriptionCriteria.type === 'MARKDOWN'" [innerHTML]="descriptionData.html | sanitizeHtml"
             class="description"></div>
        <div *ngIf="descriptionCriteria.type === 'TEXT'" [innerHTML]="descriptionData.text | sanitizeHtml"
             class="description"></div>
    </pcard>

    <ng-template ngFor let-entry [ngForOf]="tags" let-i="index">
        <pcard heading="{{headers[i]}}">
            <p class="card-content">
                <a *ngIf="types[i] === 'url'" class="anchored"
                   href="{{entry.link}}"
                   target="_blank">{{entry.text}}</a>
                <ng-template *ngIf="types[i] === 'LABEL'" ngFor let-label [ngForOf]="entry?.labelArray">
                    <ptooltip *ngIf="!tooltipAsText"
                              [tooltip]="label.tooltip.text"
                              [tooltipHtml]="prefixInternalLink(label.tooltip.html)" [position]="'n'">
                        <div class="label mylabel {{label.clazz}}" [style.color]="label.color"
                             [style.background-color]="label.backgroundColor">
                            {{label.name}}
                        </div>
                    </ptooltip>
                    <div *ngIf="tooltipAsText" class="tt-container">
                        <span class="label mylabel {{label.clazz}} tt-label" [style.color]="label.color"
                              [style.background-color]="label.backgroundColor">
                        {{label.name}}
                        </span>
                        <span class="tooltip-text tt-tooltip" [innerHtml]="label.tooltip.text|sanitizeHtml"></span>
                        <br *ngIf="label.tooltip.text && label.tooltip.html">
                        <span class="tooltip-text tt-tooltip" [innerHtml]="prefixInternalLink(label.tooltip.html|sanitizeHtml)"></span>
                    </div>
                </ng-template>

                <span *ngIf="types[i] === 'TEXT'">{{entry.content}}</span>

                <span *ngIf="types[i] === 'MARKDOWN'"
                      [innerHtml]="prefixInternalLink(entry?.html | sanitizeHtml)"></span>

                <span *ngIf="types[i] === 'RATING'" [innerHtml]="prefixInternalLink(entry?.html | sanitizeHtml)"></span>
            </p>
        </pcard>
    </ng-template>

    <pcard heading="References" *ngIf="configurationService.configuration.citation.size != 0" class="description">
        <referencestable [changeNum]="configurationService.configuration.citation.length"
                         [citationMap]="configurationService.configuration.citation" [prefix]="'details-'"></referencestable>
    </pcard>
</div>