solid-6-list-component.ts

import { Component, Injector, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ListLevel } from './models/list-level.enum';
import { ArticleModel } from './models/article.model';
import { ApiService } from './services/api.service';
import { ListService, ListType } from './services/list/list.service';
import { AuthorsListService } from './services/list/authors-list.service';
import { ArticlesListService } from './services/list/articles-list.service';

@Component({
  selector: 'list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less'],
  providers: [AuthorsListService, ArticlesListService],
})
export class ListComponent implements OnInit {
  public listTitle: string;
  public showNbOfArticlesDropdown: boolean;
  public list$: Observable<ListType>;
  private listService: ListService;
  private subscriptions = new Subscription();

  constructor(private injector: Injector, private apiService: ApiService) {
    this.listService = this.listServiceFactory(ListLevel.AUTHORS);
  }

  ngOnInit(): void {
    this.subscriptions.add(
      this.listService.listLevel$
        .pipe(
          tap((listLevel: ListLevel) => {
            this.listService = this.listServiceFactory(listLevel);
            this.initListData();
          })
        )
        .subscribe()
    );
  }

  public getArticlesByAuthor(authorId: number): Observable<ArticleModel[]> {
    return this.apiService.fetchArticlesByAuthor(authorId);
  }

  private initListData(): void {
    this.list$ = this.listService.getList();
    this.listTitle = this.listService.listTitle;
    this.showNbOfArticlesDropdown = this.listService.showNbOfArticlesDropdown;
  }

  private listServiceFactory(listLevel: ListLevel): ListService {
    switch (listLevel) {
      case ListLevel.AUTHORS:
        return this.injector.get(AuthorsListService);
      case ListLevel.ARTICLES:
        return this.injector.get(ArticlesListService);
    }
  }
}