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

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { Router } from '@angular/router';

export type INews = {
    id: string | number,
    image: string,
    heading: string,
    description: string,
    type: 'VIDEO' | 'ARTICLE',
    likes: number,
    isBookmarked: boolean,
    isLiked: boolean,
    comments: Array<{
        user: string,
        comment: string,
        likes: number,
        isLiked: boolean
    }>,
};

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
})

export class HomePage implements OnInit {
    @ViewChild('slides') slides: IonSlides;
    
    selectedTab: string = 'news';
    selectedArticle: number = null;    

    slideOpts = {
        slidesPerView: 1.5,
        spaceBetween: 15,
        initialSlide: 1,
        centeredSlides: true
    };

    newsData: Array<INews> = [];

    constructor(
        private router: Router
    ) { }

    ngOnInit() {

        this.newsData = [{
            id: 0,
            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
            heading: 'KL Rahul scores fastest 100',
            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
            type: 'ARTICLE',
            isLiked: false,
            isBookmarked: false,
            likes: 308,
            comments: []
        }, {
            id: 1,
            image: 'https://s3.india.com/wp-content/uploads/2020/10/Mayank-Agarwal-celebrates-Kings-XI-Punjabs-win-over-Mumbai-Indians-in-match-37-of-Dream11-IPL-2020-in-Dubai%C2%A9KXIP-Twitter.jpg',
            heading: 'KXIP beat MI by 3 Wickets',
            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. 
            Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.

            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
            santium quia tempore totam repellat amet debitis adipisci deserunt iste.
            
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
            santium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
            type: 'VIDEO',
            likes: 10,
            isLiked: false,
            isBookmarked: false,
            comments: [{
                user: 'kxipFan',
                comment: 'Yay!',
                likes: 2,
                isLiked: true,
            }, {
                user: 'SehwagFan',
                comment: 'finally!',
                likes: 5,
                isLiked: false,
            }]
        }, {
            id: 2,
            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
            heading: 'KL Rahul scores fastest 100',
            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
            type: 'ARTICLE',
            isLiked: false,
            isBookmarked: false,
            likes: 308,
            comments: []
        }, {
            id: 3,
            image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
            heading: 'KL Rahul scores fastest 100',
            description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
            type: 'ARTICLE',
            isLiked: false,
            isBookmarked: false,
            likes: 308,
            comments: []
        }];                
    }

    ngAfterViewInit() {
        this.selectedArticle = 0;       
    }

    getIndex(e: any) {
        console.log(this.slides);
    }

    showNewsDetails(news: any) {
        this.router.navigate(['/home-details', { news: JSON.stringify(news) }])
    }

    
}