evt-angular-ovi/src/app/components/rendition/rendition.component.html

<div class="rendition">
    <ng-container *ngIf="data.scope || data.selector || data.scheme">
        <div class="rendition-section rendition-scope" *ngIf="data.scope">
            <label>{{'scope' | translate}}: </label>
            <span>{{data.scope}} {{ scopeDescription$ | async }}</span>
        </div>
        <div class="rendition-section rendition-selector" *ngIf="data.selector">
            <label>{{'selector' | translate}}: </label><span>{{data.selector}}</span>
        </div>
        <div class="rendition-section rendition-scheme" *ngIf="data.scheme">
            <label>{{'scheme' | translate}}: </label><span>{{data.scheme}} {{data.schemeVersion}}</span>
        </div>
        <div class="rendition-section rendition-content">
            <label>{{'rules' | translate}}: </label>
            <span>
                <evt-content-viewer *ngFor="let element of data.content" [content]="element"></evt-content-viewer>
            </span>
        </div>
    </ng-container>
    <ng-container *ngIf="!data.scope && !data.selector && !data.scheme && data.id">
        <div class="rendition-section rendition-content">
            <label>{{data.id}}:</label>
            <span>
                <evt-content-viewer *ngFor="let element of data.content" [content]="element"></evt-content-viewer>
            </span>
        </div>
    </ng-container>
</div>