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

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.page.html',
    styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
    selectedTab: string = 'news';

    slideOpts = { };

    newsData: Array<{
        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
        }>,
    }> = [];

    constructor() { }

    ngOnInit() {

        this.newsData = [{
            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.',
            type: 'VIDEO',
            likes: 10,
            isLiked: false,
            isBookmarked: false,
            comments: [{
                user: 'kxipFan',
                comment: 'Yay!',
                likes: 2,
            }, {
                user: 'SehwagFan',
                comment: 'finally!',
                likes: 5,
            }]
        }, {
            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: []
        }];

        this.slideOpts = {
            slidesPerView: 1.3,
            spaceBetween: 30,
            slidesOffsetBefore: 30,
            slidesOffsetAfter: 30,
        }

    }

}