Массивы и маршруты: угловые

<div *ngIf = "image">
  <h2>{{ image.catergory | uppercase }}</h2>
<div>

<div class  = "row" >{{activeImage}}
    <button (click) = "prev()" class = "previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class  = "img-container">
    </div>
    <button (click) = "next()" class = "next round">&#8250;</button>
</div>

  
<!-- <div class  = "row" >{{activeImage}}
    <button (click) = "prev()" class = "previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ utilities.url +')'}" class  = "img-container">
    </div>
    <button (click) = "next()" class = "next round">&#8250;</button>
</div>
 -->

import { Injectable } from '@angular/core';

@Injectable()
export class GraphService {

  constructor() { }

  // getGraph(id: number){
  //   return GRAPHS.slice(0).find(graph => graph.id == id)
  // }

  getTestingGraphs(id: number){
    return TESTINGRAPHS.slice(0).find(graph => graph.id == id)
  }

  getUtilitiesGraphs(id:number){
    return UTILITIESGRAPHS.slice(0).find(graph => graph.id == id)
  }

}

const TESTINGRAPHS = [
  {id: 1, catergory: "Popularity", url: "assets/img/pgraph.jpg" },
  {id: 2, catergory: "releasefrequency", url: "assets/img/rqgraph.jpg" },
  {id: 3, catergory: "lmd", url: "assets/img/lmd.jpg" },
  {id: 5, catergory: "last discuss overflow", url: "assets/img/ldof.png" },
  {id: 6, catergory: "performance", url: "assets/img/performance.jpg" },
  {id: 7, catergory: "security", url: "assets/img/security.jpg" },
  {id: 8, catergory: "responsetime", url: "assets/img/responsetime.png" },
  {id: 9, catergory: "closingtime", url: "assets/img/isueclosing.png" }
];


const UTILITIESGRAPHS = [
  {id: 1, catergory: "last discuss overflow", url: "assets/img/ldof.png" },
  {id: 2, catergory: "performance", url: "assets/img/performance.jpg" },
  {id: 3, catergory: "security", url: "assets/img/security.jpg" }
];

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { ImageService } from '../metric-details/shared/image.service';
import { LibraryService } from '../library.service';
import { Library } from '../library';
import { GraphService } from '../graph.service';
import { map,mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-metric-view',
  templateUrl: './metric-view.component.html',
  styleUrls: ['./metric-view.component.css']
})
export class MetricViewComponent implements OnInit {
image: any
testing: any;
utilities: any;
library: Library;
visibleImages: any[] = [];


activeId = 0;


  constructor(private imageService: ImageService, private libraryService:LibraryService, private graphService:GraphService, private location: Location, private route: ActivatedRoute, private router: Router) {
    this.visibleImages = this.imageService.getImages();
   }

  ngOnInit() {
    const id$ = this.route.paramMap.pipe(map((params) => params.get('id') || 0), map(n => Number(n)));
    id$.subscribe(id => {
      this.activeId = id;
      this.testing =  this.graphService.getTestingGraphs(id);
      this.utilities = this.graphService.getUtilitiesGraphs(id);
      this.image = this.imageService.getImage(id);
    });

    id$.pipe(mergeMap(id => this.libraryService.getLibrary(id)))
      .subscribe(library => this.library = library);
  }


  next() {
    // const next = this.activeId + 1 >= this.image.length - 1  ? this.graph.length - 1 : this.activeId + 1;
    const next = this.activeId + 1 >= 9  ? 1 : this.activeId + 1;
    this.router.navigate(['/image/' + next]);
  }

  prev() {
    const prev = this.activeId - 1 < 1 ? 9 : this.activeId - 1;
    this.router.navigate(['/image/' + prev]);
  }

}