engtosin

engtosin.html

<div class="container" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column"
    fxLayoutAlign.gt-md="space-around center" fxLayoutGap="10px" fxLayoutGap.xs="0">

    <div fxFlex *ngIf="font">
        <mat-card class="selected-card">
            <mat-card-header>
                <img class="header-image" mat-card-avatar src={{font.image}} alt={{font.name}}>
                <mat-card-title>
                    <h3><strong>{{font.name | uppercase}}</strong></h3>
                </mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <p>{{font.description}}
                </p>
            </mat-card-content>
            <mat-card-actions>
                <button mat-button>LIKE</button>
                <button mat-button>SHARE</button>
            </mat-card-actions>
        </mat-card>
    </div>


    <div fxFlex="40" *ngIf="font">
        <mat-list>
            <h3>Comments</h3>
            <mat-list-item *ngFor="let comment of font.comments">
                <p matLine> {{comment.comment}} </p>
                <p matLine> {{comment.rating}} Stars</p>
                <p matLine> -- {{comment.author}} {{comment.date | date}} </p>
            </mat-list-item>
        </mat-list>
    </div>

</div>