How to show next and previous data on hover in angular 2

I am building a simple angular two app. Everything is working fine. In Project Detail next and previous is working fine when the user clicks it shows next and previous data in the view. But the problem is when I hover the next or previous button it should show me the next or previous data in browser bottom URL.

As in component HTML, i have routerLink so can you just help me what to put so that it should show me the next and previous data.

Here is component nav HTML

<div class="prev-btn">
    <a [routerLink]="" (click)="previousProject()" [ngClass]="{disabled: currentProjectIndex === 0}">
      <i class="fa fa-angle-left" aria-hidden="true"></i> <span>Prev</span></a>
  </div>

  <div class="next-btn">
    <a [routerLink]="" (click)="nextProject()" [ngClass]="{disabled: currentProjectIndex === (total-1)}"><span>Next</span> <i class="fa fa-angle-right" aria-hidden="true"></i></a>
  </div>

and my two methods of next and previous in the component are

previousProject(){
this.dataService.getProjects().subscribe(
  (proj: Project[]) => {
    if(this.currentProjectIndex !== 0){
      this.currentProjectIndex = this.currentProjectIndex - 1;
      this.project = proj[this.currentProjectIndex];
    }else{
      this.currentProjectIndex = 0;
      this.project = proj[this.currentProjectIndex];
    }
    this.router.navigate(['/work', proj[this.currentProjectIndex].id]);
  });

}

nextProject(){
this.dataService.getProjects().subscribe(
  (proj: Project[]) => {
    if(this.currentProjectIndex !== this.total-1){
      this.currentProjectIndex = this.currentProjectIndex + 1;
      this.project = proj[this.currentProjectIndex];
    }else{
      this.project = proj[this.total-1];
    }
    this.router.navigate(['/work', proj[this.currentProjectIndex].id]);
  });

}


ANSWERS:


Replace the (click) with the [routerLink] And define the routerLink with your router and a paramater of proj[this.currentProjectIndex].id.

Refer this:

[routerLink]="['/middle', previousProject.id]"

and

[routerLink]="['/middle', nextProject.id]"

At your component, define the previousProject and nextProject, and value to them according to your business logic in the constructor or ngOnInit.

Update

In angular2, navigate to the same router will do nothing. So you can subscribe to changes in the parameters that you send like this:

ngOnInit() {
  this.sub = this.route.params.subscribe(params => {
    const id = params['id'];
    // create service to get the data by using the changed 'id' parameter
  });
}


 MORE:


 ? ng-repeat loops too many times
 ? Angularjs Updated table after clicking a link with parameters
 ? Angular All slashes in URL changed to %2F
 ? TypeError: Cannot read property 'template' of undefined
 ? Dynamic ng-controller directives based on $routeProvider params
 ? Unable to make routing with my bootstrap nav bar using ngroute
 ? how to avoid conflicts with angular router 1.6.x
 ? AngularJs form submission is not working
 ? html5Mode doesn't link to base url
 ? Angularjs routeprovider multiple routes lead to same view