title: Angular 9 routerLinkActive not working properly
body: <p>My problem is when I click other router link, the class of router link </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']"&gt;Dashboard&lt;/div&gt;
  </code></pre>
  
  <p>is still active, so I have 2 active class links. </p>
  
  <p>app-routing.module.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>  {
      path: '',
      component: SidebarComponent, 
      children: [
        {path: '', component: DashboardComponent },
        {path: 'user-list', component: DashboardComponent },
        {path: 'account', component: DashboardComponent },
        {path: 'setting', component: DashboardComponent }
      ]
    }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="side-link" [routerLink]="['/']" [routerLinkActive] = "['link-active']"&gt;Dashboard&lt;/div&gt;
      &lt;div class="side-link" [routerLink]="['/user-list']" [routerLinkActive] = "['link-active']"&gt;User List&lt;/div&gt;
      &lt;div class="side-link" [routerLink]="['/account']" [routerLinkActive] = "['link-active']"&gt;Account&lt;/div&gt;
      &lt;div class="side-link" [routerLink]="['/setting']" [routerLinkActive] = "['link-active']"&gt;Setting&lt;/div&gt;
  </code></pre>