title: Angular How to set all links to a different color on RouterLinkActive
body: <p>I have a navbar and I want all the links to be black when I navigate to the About Page, however, my SCSS statement doesn't seem to work on all the anchor-tags.</p>
  
  <p>html</p>
  
  <pre><code> &lt;div class="navbar-nav"&gt;
        &lt;a class="nav-item nav-link active" [routerLink] = "['/home']"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;a class="nav-item nav-link" [routerLink] = "['/about']" routerLinkActive = "BlackLinks"&gt;About&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Gallery&lt;/a&gt;
        &lt;a class="nav-item nav-link" href="#"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>SCSS </p>
  
  <pre><code>
  .BlackLinks{
    a{
      color: #343434 !important
    }
  }
  </code></pre>
  
  <p>I think I could achieve this with ngClass but I feel then I would require to make a variable in service and set it when I change to a new page, but I don't want to do that.</p>