Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 
 
 

125 rader
4.6 KiB

  1. import { Component, OnInit, ViewChild } from '@angular/core';
  2. import { IonSlides } from '@ionic/angular';
  3. import { Router } from '@angular/router';
  4. export type INews = {
  5. id: string | number,
  6. image: string,
  7. heading: string,
  8. description: string,
  9. type: 'VIDEO' | 'ARTICLE',
  10. likes: number,
  11. isBookmarked: boolean,
  12. isLiked: boolean,
  13. comments: Array<{
  14. user: string,
  15. comment: string,
  16. likes: number,
  17. isLiked: boolean
  18. }>,
  19. };
  20. @Component({
  21. selector: 'app-home',
  22. templateUrl: './home.page.html',
  23. styleUrls: ['./home.page.scss'],
  24. })
  25. export class HomePage implements OnInit {
  26. @ViewChild('slides') slides: IonSlides;
  27. selectedTab: string = 'news';
  28. selectedArticle: number = null;
  29. slideOpts = {
  30. slidesPerView: 1.5,
  31. spaceBetween: 15,
  32. initialSlide: 1,
  33. centeredSlides: true,
  34. simulateTouch: false,
  35. followFinger: false,
  36. };
  37. newsData: Array<INews> = [];
  38. constructor(
  39. private router: Router
  40. ) { }
  41. ngOnInit() {
  42. this.newsData = [{
  43. id: 0,
  44. image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
  45. heading: 'KL Rahul scores fastest 100',
  46. 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.`,
  47. type: 'ARTICLE',
  48. isLiked: false,
  49. isBookmarked: false,
  50. likes: 308,
  51. comments: []
  52. }, {
  53. id: 1,
  54. 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',
  55. heading: 'KXIP beat MI by 3 Wickets',
  56. description: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam.
  57. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.
  58. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
  59. santium quia tempore totam repellat amet debitis adipisci deserunt iste.
  60. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
  61. santium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
  62. type: 'VIDEO',
  63. likes: 10,
  64. isLiked: false,
  65. isBookmarked: false,
  66. comments: [{
  67. user: 'kxipFan',
  68. comment: 'Yay!',
  69. likes: 2,
  70. isLiked: true,
  71. }, {
  72. user: 'SehwagFan',
  73. comment: 'finally!',
  74. likes: 5,
  75. isLiked: false,
  76. }]
  77. }, {
  78. id: 2,
  79. image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
  80. heading: 'KL Rahul scores fastest 100',
  81. 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.`,
  82. type: 'ARTICLE',
  83. isLiked: false,
  84. isBookmarked: false,
  85. likes: 308,
  86. comments: []
  87. }, {
  88. id: 3,
  89. image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg',
  90. heading: 'KL Rahul scores fastest 100',
  91. 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.`,
  92. type: 'ARTICLE',
  93. isLiked: false,
  94. isBookmarked: false,
  95. likes: 308,
  96. comments: []
  97. }];
  98. }
  99. ngAfterViewInit() {
  100. this.selectedArticle = 0;
  101. }
  102. getIndex(e: any) {
  103. console.log(this.slides);
  104. }
  105. showNewsDetails(news: any) {
  106. this.router.navigate(['/home-details', { news: JSON.stringify(news) }])
  107. }
  108. }