How to navigate to a specific part of the page with the Angular 2 Router?

Question

I'm trying to navigate to a particular element in my Angular 2 component. From the documentation I've read, it says to use fragment with the NavigationExtras object. I'm not sure how to do this when I want to navigate within the same page.

Another part of the problem is the part of the page I want to navigate to is loaded through trough a *ngFor and creating div elements with the id I want to navigate to.

I may be trying to navigate to that part of the page before it's loaded into the DOM. I wrapped a timeout around it to see if that would help, but so far not successful.

I'm on the properties page, and trying to navigate to another part within the page. You can see in the HTML where I'm setting the id on the div where I need to navigate to.

  if (sessionStorage['destinationProperty'] !== undefined) { let navigationExtras: NavigationExtras = { fragment: sessionStorage.getItem('destinationProperty') } window.setTimeout(() => { this._router.navigate(['/properties'], navigationExtras); }, 1000); } 

  <div class="row" *ngFor="let p of properties"> <div class="col-md-12"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6" id="{{p.id}}"> <table> <tr> <td rowspan="3"><img [src]="getImgPath(p)" /></td> <td class="title" (click)="destination(p)">{{p.name}}</td> </tr> <tr> <td class="summary">{{p.summary}}</td> </tr> <tr> <td><span class="mapLink" (click)="mapview(p)">view on map <i class="fa fa-map-o" aria-hidden="true"></i></span></td> </tr> </table> </div> <div class="col-md-3"></div> </div> </div> </div> 

Answer 1

• In Angular2 app you can have a router for some components.

• Each component can have its own router for other components and so on.

So you actually need a child router for your primary router.
Here it's an example from Angular2 docs of how they handle children routers :
Master router

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Child router

    import { ModuleWithProviders } from '@angular/core';
    import { Routes,
             RouterModule } from '@angular/router';

    import { HeroComponent }       from './hero.component';
    import { HeroListComponent }   from './hero-list.component';
    import { HeroDetailComponent } from './hero-detail.component';

    const routes: Routes = [
      { path: '',
        component: HeroComponent,
        children: [
          { path: '',    component: HeroListComponent },
          { path: ':id', component: HeroDetailComponent }
        ]
      }
    ];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Links to full example :
Angular2 lazy loading with the router
Angular2 full working plunker for lazy loading with the router