sds-tab.ts

import { Component, OnInit } from '@angular/core';
import { Sds } from '../../_models/sds';
import { SdsService } from '../../_services/sds.service';

@Component({
  selector: 'app-sds-tab',
  templateUrl: './sds-tab.component.html',
  styleUrls: ['./sds-tab.component.scss'],
})
export class SdsTabComponent implements OnInit {
  tabs: any[] = [ ];
  lowerAlph: any[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
  'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
  sdsSheets: Sds[];

  constructor(private sdsService: SdsService) { }

  ngOnInit() {
    this.buildTabs();
  }

  buildTabs() {
    this.lowerAlph.forEach(element => {
      this.tabs.push({
       title: element.toUpperCase(),
       content: '',
      });
      this.loadSds(element);
     });
  }

  loadSds(letter) {
    this.sdsService.getSdsList(letter).subscribe((sdsSheets: Sds[]) => {
      this.sdsSheets = sdsSheets;
    });
  }
}