CODEWITHSUNDEEP
htmlangular
Devstar34
Devstar34

Reputation: 1097

Link takes double click to activate- how to make it only one? Angular 5

I'm building an app in Angular 5 and have a navigation component that will display various tabs/links. When the link is active (currently being viewed) the tab will have a border around it and look like it is the front of a file folder.

The problem is, I only need to click once in order to make the link appear active, but have to click the tab/text twice in order to get it to actually load the page. Why is that, and how can I get it to load completely after one click? Does this happen because I have two click events activated on one link?

My tabs in html:

 <div *ngIf="authService.current_route == '/' ">
        <a [routerLink]="['']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 0" (click)="changeroute()" (click)="selectTab(0)" >Site List</li>
        </a>
        <a [routerLink]="['/sites/map']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 1" (click)="changeroute()" (click)="selectTab(1)" >All Sites Map</li>
        </a>
        <a [routerLink]="['/user-access']" data-toggle="tab">
            <li [class.active-link]="selectedTab === 2" (click)="changeroute()" (click)="selectTab(2)" >User Access</li>
        </a>
  </div>

In my component:

export class NavigationComponent implements OnInit {
   deciding_route: any;
   selectedTab = 0;
   current_site;
   local_route
   current_site_id

selectTab(tabId: number) {
    this.selectedTab = tabId;
 }
constructor(public authService: AuthService, private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
}

changeroute() {
   this.authService.current_route = this.router.url;
   this.authService.route_with_id = this.authService.current_route
}

}

Thanks so much!! Let me know if I can clarify anything.

Upvotes: 2

Views: 3433

Answers (2)

dynamiclynk
dynamiclynk

Reputation: 2331

In my case there was an error in the component I was navigating from but no error in the console because navigate is a promise.

After consuming the promise I found the issue it the error written to the console.

const nav = this.router.navigate(['myapp/dashboard']);

nav
 .then((v) => {
    console.debug('to dashboard', v);
 })
 .catch((e) => {
    console.error('to dashboard', e);
 });

Upvotes: 0

lenilsondc
lenilsondc

Reputation: 9800

The problem might seem to be related with the fact that the click will trigger before the router actually change the route, then, calling your method changeroute(); doesn't change anything because the route is still the same at this time; however, when you click the second time, the route have already been changed, after the first click handler, so it changes according to the expected route.

A way out is to transfer the changeroute() method to a route change listener:

constructor(private router: Router) {
  router.changes.subscribe((val) => { this.changeroute(); })
}

You could also move the click handler upwards, i.e, move to an element which would be parent of the routerLink so that your click would happen after the click on the link, it might work as well.

Further explanation

Consider the following component:

@Component({
  selector: 'my-test',
  template: `
    <div (click)="onClick1()">
      <button (click)="onClick2()">Click</button>
    </div>`,
})
export class TestComponent  {
  onClick1(){
    console.log('click 1')
  }  
  onClick2(){
    console.log('click 2')
  }
}

If the button gets clicked, it is going to display the console like bellow:

click 2    
click 1

It implies the propagation starts on the child (tip) to parents until reach the root node (provided that your would have listener for all parents until the root).

Upvotes: 2

Related Questions