title: How to add active class to link which has fragmment in angular?
body: <p>Angular version is 7 and I want to add active class to the link clicked. Here the link is old school navigation(routing trough ID).</p>
  <p>My HTML code follows as below:</p>
  <pre><code>&lt;div class=&quot;sidenav-container&quot;&gt;
    &lt;div class=&quot;list&quot;&gt;
      &lt;mat-list role=&quot;list&quot;&gt;
        &lt;mat-list-item role=&quot;listitem&quot;
          &gt;&lt;a
            routerLink=&quot;./&quot;
            fragment=&quot;report&quot;
            &gt;1. Report&lt;/a
          &gt;&lt;/mat-list-item
        &gt;
        &lt;mat-list-item role=&quot;listitem&quot;
          &gt;&lt;a
            routerLink=&quot;./&quot;
            fragment=&quot;profile&quot;
            &gt;2. Profile&lt;/a
          &gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-list&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my css file looks as below:</p>
  <pre><code>.active {
    color: green;
    font-weight: 900;
  }
  </code></pre>