CODEWITHSUNDEEP
angular
pennyBoy
pennyBoy

Reputation: 397

Angular routes and functions

I want to check to see if my getDomain() function is grabbing the correct route id number so that it can display the appropriate images. I'm not sure if my syntax is correct with using *ngIf. Below is an image of the UI as well as the corresponding html file and .ts file. Basically, based on what getDomain() function returns I would return a set of displayed images to the user.

<div *ngIf = "getDomain() != 1" class ="row" >
    <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 *ngIf = "getDomain() != 2" class ="row" >
    <button (click)="prev()" class="previous round">&#8249;</button>
    <div  [ngStyle] = "{'background-image': 'url('+ mocking.url +')'}" class ="img-container">
    </div>
    <button (click)="next()" class="next round">&#8250;</button>
</div>

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

enter image description here 

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 { Domain } from '../library';
import { GraphService } from '../graph.service';
import { DomainService } from '../domain.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;
domain: Domain;
testing: any;
utilities: any;
library: Library;
visibleImages: any[] = [];

activeId = 0;


  constructor(private imageService: ImageService, private libraryService:LibraryService, private domainService: DomainService, 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);

      this.getDomain();
  }


  getDomain(): void{
    const id = +this.route.snapshot.paramMap.get('id');
    this.domainService.getDomain(id)
      .subscribe(domain => this.domain = domain);
  }


  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]);
  }

}

Upvotes: 2

Views: 48

Answers (1)

Karthick Manoharan
Karthick Manoharan

Reputation: 681

Currently getDomain function is not returning any values.

getDomain() {
 const id = this.route.snapshot.paramMap.get('id');
 this.domainService.getDomain(id)
   .subscribe(domain => this.domain = domain);
}

And in html code you can verify the values against the domainvariable

<div *ngIf = "domain === 1" class ="row" >
<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>

‹ › ‹ ›

Upvotes: 1

Related Questions