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

<ion-content>
    <figure class="theme-bg-image">
        <img src="assets/home-team/KXIP-lion-white.svg">
    </figure>

    <div class="heading-holder">
        <h2 class="main-header"> Home </h2>
    
        <section class="segments">
            <button [ngClass]="{'active' : selectedTab === 'news'}"
            (click)="selectedTab = 'news'"> News ({{ newsData.length }}) </button>
            <button [ngClass]="{'active' : selectedTab === 'videos'}"
            (click)="selectedTab = 'videos'"> Videos </button>
        </section>
    </div>

    <button (click)="closeArticle()" 
    class="close-article-button"
    [ngClass]="{'active' : selectedArticle !== null }"> 
        <ion-icon name="close"></ion-icon> 
    </button>

    <ion-slides [options]="slideOpts" *ngIf="selectedTab === 'news'"
    [ngClass]="{'active' : selectedArticle !== null}">        

        <ion-slide *ngFor="let news of newsData; let i = index">            
            <div class="image-holder">
                <figure>
                    <img [src]="news.image">
                </figure>

                <button 
                [ngClass]="{'active' : selectedArticle !== null}"
                *ngIf="news.type === 'VIDEO'">
                    <ion-icon name="play"></ion-icon>
                </button>

                <button
                [ngClass]="{'hide' : selectedArticle !== null}"
                *ngIf="news.type === 'ARTICLE'">
                    <ion-icon name="newspaper"></ion-icon>
                </button>
            </div>

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

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


            <section class="comments" *ngIf="selectedArticle !== null">
                <header> Comments </header>
                <ul>
                    <li *ngFor="let comment of news.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)="news.isLiked = !news.isLiked"
                    [ngClass]="{'active' : news.isLiked}">
                        <ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
                        <ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
                        <span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
                    </button>

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

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

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

                <button class="read-more" (click)="expandArticle(i)"> 
                    <span> More </span>            
                    <ion-icon name="chevron-forward-outline"></ion-icon> 
                </button>
            </section>

        </ion-slide>
    </ion-slides>

</ion-content>