title: Angular router link to element with a specified id within the page
body: <p>I'm using Angular Router and I'm trying to link to a sub-component in another route by id. Basically what would usually be done using the <code>&lt;a href="www.url.com/profile/#profile-header-id"&gt;</code>.</p>
  
  <p>I'm not sure if there's a built-in way for the Angular router to do this, but if not perhaps I can manually trigger the link at a later point when I know the element has been rendered.</p>
  
  <p>The issue isn't linking to another route which of course is done with the Link from the Angular router. The issue is linking to an element which is found in the rendered HTML of the linked component.</p>
  
  <p>Less Abstract Code Example:</p>
  
  <p>So let's say my router in the app.module.ts file is</p>
  
  <pre><code>`const routes = [
    { path: '', component: HomeComponent},  
    { path: '#section3', component: HomeSection3Component}, 
    { path: 'B', component: BComponent}, 
  ];`
  </code></pre>
  
  <p>Now in component OtherComponent, I want a Link that not only takes me to the home page route ' ', but also scrolls to the element of id  #section3, thereby skipping all the irrelevant stuff. </p>
  
  <p>My home component has nested components for each one of the sections of the page. Each section/component has an id.</p>
  
  <p>home.component.html</p>
  
  <pre><code>`&lt;main&gt;
       &lt;app-section1&gt;&lt;/app-section1&gt;
       &lt;app-section2&gt;&lt;/app-section2&gt;
       &lt;app-section3&gt;&lt;/app-section3&gt;
  &lt;/main&gt;`
  </code></pre>
  
  <p>However, all I can see is a blank page when clicking the button <code>&lt;button routerLink="#section3"&gt;Go to homepage section 3&lt;/button&gt;</code> on the B page.</p>