kxip-app/src/app/home-details/home-details.page.html

<ion-content>
    <button (click)="back()" 
    class="close-article-button active"> 
        <ion-icon name="close"></ion-icon> 
    </button>

    <div class="image-holder">
        <figure>
            <img [src]="newsDetails.image">
        </figure>

        <button *ngIf="newsDetails.type === 'VIDEO'">
            <ion-icon name="play"></ion-icon>
        </button>
    </div>

    <section class="content">
        <h4> {{ newsDetails.heading }} </h4>

        <div class="details">
            {{ newsDetails.description }}
        </div>
    </section>


    <section class="comments">
        <header> Comments </header>
        <ul>
            <li *ngFor="let comment of newsDetails.comments">                    
                <p> {{ comment.comment }} <label> - {{ comment.user }} </label> </p>

                <button (click)="comment.isLiked = !comment.isLiked"
                [ngClass]="{'active' : comment.isLiked}">
                    <ion-icon *ngIf="!comment.isLiked" name="heart-outline"></ion-icon>
                    <ion-icon *ngIf="comment.isLiked" name="heart"></ion-icon>
                    <span> {{ comment.isLiked ? comment.likes + 1 : comment.likes }} </span>
                </button>
            </li>
            <div class="input-holder" id="comment-input">
                <input type="text" placeholder="Type your comment" [(ngModel)]="myComment">
                <button (click)="postComment()"> <ion-icon name="send"></ion-icon> </button>
            </div>         
        </ul>
    </section>

    <section class="action-buttons">
        <section class="shortcuts">
            <button class="wide-button" (click)="newsDetails.isLiked = !newsDetails.isLiked"
            [ngClass]="{'active' : newsDetails.isLiked}">
                <ion-icon *ngIf="!newsDetails.isLiked" name="heart-outline"></ion-icon>
                <ion-icon *ngIf="newsDetails.isLiked" name="heart"></ion-icon>
                <span> {{ newsDetails.isLiked ? newsDetails.likes + 1 : newsDetails.likes }} </span>
            </button>

            <button>
                <ion-icon name="share-social-outline"></ion-icon>
            </button>
        </section>

        <section class="shortcuts">
            <button (click)="newsDetails.isBookmarked = !newsDetails.isBookmarked"
            [ngClass]="{'active' : newsDetails.isBookmarked}">
                <ion-icon *ngIf="!newsDetails.isBookmarked" name="bookmark-outline"></ion-icon>
                <ion-icon *ngIf="newsDetails.isBookmarked" name="bookmark"></ion-icon>
            </button>

            <button class="wide-button" (click)="scrollToAddComment()">
                <ion-icon name="chatbubble-outline"></ion-icon>
                <span> {{ newsDetails.comments.length }} </span>
            </button>
        </section>

    </section>
</ion-content>