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

<ion-content>
    <div class="content-container">
        <div class="heading-holder">
            <h2 class="main-header"> # Discover </h2>
        
            <section class="segments">
                <button [ngClass]="{'active' : selectedTab === 'news'}"
                (click)="selectedTab = 'news'"> News </button>
                <button [ngClass]="{'active' : selectedTab === 'popular'}"
                (click)="selectedTab = 'popular'"> Popular </button>
            </section>
        </div>
    
        <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
            
            <ion-slide *ngFor="let news of newsData; let i = index">
                <div class="image-holder">
                    <figure>
                        <img [src]="news.image">
                    </figure>
    
                    <button *ngIf="news.type === 'VIDEO'">
                        <ion-icon name="play"></ion-icon>
                    </button>
    
                    <button *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="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>                
    
                    <button class="read-more" (click)="showNewsDetails(news);"> 
                        <span> More </span>            
                        <ion-icon name="chevron-forward-outline"></ion-icon> 
                    </button>
                </section>
            </ion-slide>
        </ion-slides>

        <ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'popular'">
            <ion-slide *ngFor="let news of popularData; let i = index">
                <div class="image-holder">
                    <figure>
                        <img [src]="news.image">
                    </figure>
    
                    <button *ngIf="news.type === 'VIDEO'">
                        <ion-icon name="play"></ion-icon>
                    </button>
    
                    <button *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="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>                
    
                    <button class="read-more" (click)="showNewsDetails(news);"> 
                        <span> More </span>            
                        <ion-icon name="chevron-forward-outline"></ion-icon> 
                    </button>
                </section>
            </ion-slide>
        </ion-slides>
    </div>

</ion-content>