Check

by Gopinath Kaliappan

HTML

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      API Component
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="ion-text-center">
      Api Works
  </div>
  <ion-slides>
    <ion-slide *ngFor="let chapter of chapters; let i = index" (click)="getChapters(chapter)">
        {{chapter}}
    </ion-slide>
  </ion-slides>
      <ion-slides>
        <ion-slide *ngFor="let kural of currentKurals; let i = index">
           <ion-card>
            <img src="img/card-saopaolo.png"/>
            <div class="card-title">{{kural.chapter}}</div>
            <div class="card-subtitle">41 Listings</div>
            <div *ngFor="let line of kural.kural" class="lines">
              {{line}}
            </div>
          </ion-card>
        </ion-slide>
        <button type="submit" float-left ion-button  color="primary" class="btnPrev">Prev</button>
        <button type="submit" float-right ion-button color="primary" class="btnNext">Next</button>

      </ion-slides>


</ion-content>

JavaScript

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../services/api.service';


@Component({
  selector: 'app-api',
  templateUrl: './api.component.html',
  styleUrls: ['./api.component.scss'],
})
export class ApiComponent implements OnInit {

  kurals: any = [];
  currentKurals: any = [];
  chapters: any = [];

  constructor(
    private http: HttpClient,
    private apiService: ApiService
  ) { }

  ngOnInit() {
    this.getData();
  }
  getData() {
    this.apiService.getData()
      .subscribe((data: any) => {

          this.kurals = data.kurals;
          this.chapters = data.chapters;
          // this.chapters = data.chapters;
          console.log(data)


      });
  }

  getChapters(chapter) {
    this.currentKurals = this.kurals.filter(item=> item.chapter === chapter);
  }


}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  configUrl = 'https://raw.githubusercontent.com/GopinathKaliappan/thirukural/master/data/thirukural.json';

  constructor(private http: HttpClient) {

  }

  getData() {

    return this.http.get(this.configUrl);
  }

}