1

I'm currently learning Angluar6 and I'm in a bit of a pickle. The current layout looks like this:

homescreen

If I press any of the buttons I will go to their pages:

/help
/leaderboards
/maingame

This is what I want to do right now. I'm giving an example with the "Help" button. This should also apply for that right "leaderboards" button.

  1. If I press the button I should go to "/help"
  2. Change the class of that button to "activeBtn" (it darkens the button basically)
  3. Change the icon from the Help icon to a "Cancel" icon
  4. Change the link of that button from "/help" to "/" (go back to the root)
  5. In case I press any other button, that new button that I pressed should do what I just wrote above, but all the other button should change back to it's default state (normal help icon, normal link).

This is what my HTML looks like:

<div class="containerBtn">
  <div class="helpDiv">
    <button id="helpBtn" class="secondary" [routerLink]="['/help']" routerLinkActive="activeBtn">
      <i class="material-icons">{{ helpBtnIcon }}</i>
    </button>
  </div>
  <div class="leaderboardDiv">
    <button id="leaderboardsBtn" class="secondary" (click)=goToLeaderboards() routerLinkActive="activeBtn">
      <i class="material-icons">{{ leaderboardsBtnIcon }}</i>
    </button>
  </div>
  <div class="startDiv">
    <button id="startBtn" class="primary" [routerLink]="['/maingame']">
      Start
    </button>
  </div>
</div>

As you can see initially I used the routerLink with a routerLinkActive. Now I'm testing a click event that executes a method. This, however, ignores the routerLinkActive.

This is my TS file:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})

export class NavigationComponent implements OnInit {

  currentUrl: string;

  helpBtnIcon = 'help';
  leaderboardsBtnIcon = 'view_headline';
  cancelBtnIcon = 'cancel';

  constructor(private router: Router) {
    this.router.events.subscribe(value => {
      this.currentUrl = router.url.toString();

      if (this.currentUrl === '/help') {
        this.helpBtnIcon = this.cancelBtnIcon;
      } else {
        this.helpBtnIcon = 'help';
      }

    });
  }

  ngOnInit() {
  }

  goToLeaderboards() {
    this.router.navigate(['/leaderboards');
    this.leaderboardsBtnIcon = this.cancelBtnIcon;
  }

}

So I'm a bit confused about what is the correct approach for what I want to do. One problem is that I get to change the ICON to that "Cancel" icon, however if I go to another page, my button remains X and it doesn't switch back to the original style & icon & link.

Thank you guys for your help!

morganbaz
  • 2,997
  • 1
  • 17
  • 30
PET
  • 13
  • 5
  • when you click on the buttons , use ``router.navigate(['yourroute')]``. So you don't have to worry about the images if you have different components for each route . – CruelEngine Sep 30 '18 at 17:44
  • Hey there! Could you please post the code as text instead of posting images? You can paste it as its own paragraph, then select it and press CTRL+K to format it as code in the rendered output. – morganbaz Sep 30 '18 at 18:00
  • 1
    @Howl - I added the code as text. I wanted to add it the 1st time but the editor was very nasty with the code. – PET Sep 30 '18 at 18:05

0 Answers0