dynamicbible/DynamicBibleIonic/src/components/strongs/strongs.html

<ion-item class="title strongs-title" padding (swipe)="close($event)">
    <ion-icon name="paper" item-left></ion-icon> <span *ngIf="data !== undefined"><span *ngIf="data.status === -1">Error:</span> {{data.prefix}}{{data.sn}}</span>
    <button ion-button icon-only item-end large clear (click)="close()">
        <ion-icon name="close-circle"></ion-icon>
    </button>
</ion-item>
<ion-card-content *ngIf="data !== undefined  && data.status === 0">
    <br>
    <div class="strongs-def">
        <h2>Strong's Definitition</h2>
        <p >
            <b>{{data.def.tr}} <ng-template [ngIf]="data.def.sn != null">({{data.def.sn}})</ng-template></b>
            - {{data.def.p}} - {{data.def.lemma}} -
            <span *ngFor="let part of data.def.de"><ng-template [ngIf]="part.sn != null"><a (click)="openItem(part.sn)">{{part.sn}}</a></ng-template><ng-template [ngIf]="part.w != null"><span [innerHTML]="part.w"></span></ng-template></span><br>
        </p>
        <ng-template [ngIf]="data.rmac !== null">
            <h2>RMAC</h2>
            <b>{{data.rmac.id}}</b>
            <br>
            <ul>
                <li *ngFor="let c of data.rmac.d">
                    {{c}}
                </li>
            </ul>
        </ng-template>
    </div>
    <div class="strongs-cross" *ngIf="data.crossrefs != null && data.crossrefs.ss != null">
        <h2>Cross References</h2>
        &nbsp;&nbsp;&nbsp;Translated as {{data.crossrefs.ss.length}} words 
        <ion-scroll scrollY="true">
            <dl>
                <dd *ngFor="let wrd of data.crossrefs.ss">
                    <strong>{{wrd.w}}</strong>: <span *ngFor="let p of wrd.rs"><a (click)="openPassage(p.r)">{{makePassage(p.r)}}</a>, </span>
                </dd>
            </dl>
        </ion-scroll>
    </div>
    <br style="clear: both"> <!-- because you load with a promise, the height of the box doesn't get set properly-->
</ion-card-content>
<ion-card-content *ngIf="data !== undefined && data.status === -1">
    <error-message [msg]="data.msg"></error-message>
</ion-card-content>

<div style="float: right">
    <button ion-button icon-center clear (click)="contextMenu()">
        <ion-icon name="more"></ion-icon>
    </button>
</div>