suralist.component.ts

import {Component, OnInit} from '@angular/core';
import {ApiService, Chapter, ChapterTranslation, ChapterType} from '../api.service';

@Component({
  selector: 'app-suralist',
  templateUrl: './suralist.component.html',
  styleUrls: ['./suralist.component.css']
})
export class SuralistComponent implements OnInit {
  chapters: Chapter[];
  suralist$: ChapterTranslation[];
  loading = true;

  constructor(private api: ApiService) { }

  ngOnInit() {
    const appLanguage = 'bn'; // from settings
    // Let see how strict typing help, and why OOP is this popular
    // and it is gold when you use strict typing + a good IDE such as: WebStorm, Visual Studio, VS Code
    // That's how be productive in work
    this.api.getChapters(appLanguage).subscribe(value => {
      this.chapters = value.data.chapters;
      console.log(this.chapters);
      const madaniChapters = this.chapters.filter(chapter => chapter.type === ChapterType.MADANI);
      console.log('Madani Chapters:');
      console.log(madaniChapters);
      // Lets grab translated Names
      const translatedNames = this.chapters.map(chapter => chapter.translation.name);
      console.log(translatedNames);
      // Let's be more dynamic // When language-based content not found
      // example if we change our appLanguage to a such language that does not exist
      // Add name_translated: string; in Chapter interface
      this.chapters = this.chapters.map(chapter => {
        chapter.name_translated = chapter.translation != null ? chapter.translation.name : chapter.name;
        // And now always use in ui/view: chapter.name_translated for a multi lang support app it is a technique
        this.loading = false;
        return chapter;
      });
    });
    // Your result
    // this.api.getChapterTranslations(appLanguage).subscribe(value => {
    //   this.suralist$ = value.data.chapter_translations;
    //   this.loading = false;
    // });
  }

}