Angular routes and functions

Question

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>

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

}

It seems as if you are trying to compare a value for `getDomain()` in your `*ngIf`, but you're not returning a value in `getDomain()`. The value is being assigned to `this.domain` as I am assuming this object has an `id` property or create a variable to hold the id; so in you're `*ngIf` you should have `domain.id` and not `getDomain()`. Also why not use the relational operator `===` instead of `!=`? — Andrew Lobban, Apr 06 '18 at 02:10
Ok that sort of works. So I should duplicate that div statement 9 times and just change the number? or is there something else I can use @AndrewLobban — pennyBoy, Apr 06 '18 at 02:21
@AndrewLobban actually can you open up a discussion so we can talk in chat? — pennyBoy, Apr 06 '18 at 02:25
@AndrewLobban I have no idea how to do it, and I don't think I have the points allowed to do it. Can you do it? — pennyBoy, Apr 06 '18 at 02:30

score 1 · Accepted Answer · answered Apr 06 '18 at 04:40

1

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>

‹ › ‹ ›

answered Apr 06 '18 at 04:40

Karthick Manoharan

663
3
10

Yeah I realized that i'm not returning any values..How do I extract the id route parameter? – pennyBoy Apr 06 '18 at 07:17
Observe the code changes above. These changes should work for you – Karthick Manoharan Apr 06 '18 at 09:22
Ok can I talk to you in chat, I have another question that deals with Sharing Data Between Angular Components and I'm getting an error which I'm not sure how to solve. – pennyBoy Apr 06 '18 at 09:28
I assume similar questions should exist in stackoverflow. You can try solutions mentioned there. If none of the solution works you can post a question (don't duplicate) ping me the link. i shall take a look – Karthick Manoharan Apr 06 '18 at 09:33
Yeah it's sort of a duplication, I just can't grasp the https://stackoverflow.com/questions/49688883/angular-sharing-data-between-angular-components-using-input-and-arrays – pennyBoy Apr 06 '18 at 09:35
added a comment there – Karthick Manoharan Apr 06 '18 at 09:38

Angular routes and functions

1 Answers1