title: How to manipulate routerLink when using app-sidebar-nav in coreUI?
body: <p>I am using CoreUI's <code>app-sidebar-nav</code> (link <a href="https://github.com/coreui/coreui-angular/tree/master/projects/coreui/angular/src/lib/sidebar" rel="nofollow noreferrer">here</a>) for redirecting to various parts of my application. However, the child route is appended to the current url instead of appending to the root of the application. </p>
  
  <p>I had a similar issue with the toolbar in the same application which was solved <a href="https://stackoverflow.com/questions/35896308/angular-2-add-routerlink-in-child-which-points-to-root-router">here</a> (after a few modifications mentioned <a href="https://stackoverflow.com/questions/55139850/refer-to-link-path-while-redirecting-to-root-using-routerlink">here</a>), but in this case I am using a CoreUI template, and wanted to know if there was a way I could manage to manipulate the routerLink the same way I am able to manipulate in my toolbar. <a href="https://github.com/coreui/coreui-angular/blob/b924a8d11fc231a2ac2e980b50d4ac0a69cdd65b/projects/coreui/angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-link.component.html" rel="nofollow noreferrer">this</a> might be of some help to determine where the <code>routerLink</code> resides </p>
  
  <p>Here is my code:</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { navItems } from 'src/app/views/core/side-nav/_nav';
  /**
  * This component renders the UI of the side-nav component.
  */
  @Component({
    selector: 'app-side-nav',
    templateUrl: './side-nav.component.html',
    styleUrls: ['./side-nav.component.scss']
  })
  export class SideNavComponent implements OnInit {
    /**
    * The constructor initializes the navItems meta.
    */
    constructor(private nav: navItems) { }
    /**
    * This property comprises the navItems meta.
    */
    public navItems = this.nav.exportData();
    /**
    * This flag indicates wether the sidebar is minimized or not.
    */
    public sidebarMinimized = true;
    /**
    * This property is an eventlistener.
    */
    private changes: MutationObserver;
    /**
    * This property contains the document body.
    */
    public element: HTMLElement = document.body;
  
    /**
    * This method observes the changes in the DOM, and minimizes and maximizes the
    * side nav accordingly.
    */
    ngOnInit() {
      this.changes = new MutationObserver((mutations) =&gt; {
        this.sidebarMinimized = document.body.classList.contains('sidebar-minimized');
      });
      this.changes.observe(&lt;Element&gt;this.element, {
        attributes: true
      });
    }
  
  }
  </code></pre>
  
  <p><strong>navitems ts file</strong></p>
  
  <pre><code>import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
  import { Injectable } from '@angular/core';
  import { DynamicRoutingService } from 'src/app/services/dynamic-routing/dynamic-routing.service';
  import { Router } from '@angular/router';
  import { DummyComponent } from 'src/app/views/dummy/dummy.component';
  import { LogoutComponent } from 'src/app/views/logout/logout.component';
  
  @Injectable({
    providedIn: 'root'
  })
  
  /**
  * The purpose of this class is to provide an object containing the translated names
  * for the categories in the nav bar, based on the translation file found in assets/i18n
  *
  * @class navItems
  */
  export class navItems {
  
    /**
    * Object containing the translated names and their respective icons
    * @property {array} navData
    */
    navData: Array&lt;{ name: string, url: string, icon: string }&gt;;
  
    /**
    * constructor for toolbar component is responsible for initializing translatePipe, dynamic routing and router,
    * as well as adding routes dynamically to the router and the dynamicRouting service
    * @param translate
    * @param router
    * @param dynamicRouting
    *
    */
    constructor(private translate: TranslatePipe, private router: Router, private dynamicRouting: DynamicRoutingService) {
      this.router.config.unshift(
        { path: 'knowledge-base', component: DummyComponent, pathMatch: "full" },
        { path: 'home', component: DummyComponent },
        { path: 'profile', component: DummyComponent },
        { path: 'settings', component: DummyComponent },
        { path: 'logout', component: LogoutComponent}
      );
      this.dynamicRouting.addItem({ text: "home", path: "home", icon: "icon-drop" });
      this.dynamicRouting.addItem({ text: "knowledge_base", path: "knowledge-base", icon: "icon-pencil" });
      this.dynamicRouting.addItem({ text: "profile", path: "profile", icon: "icon-puzzle" });
      this.dynamicRouting.addItem({ text: "settings", path: "settings", icon: "icon-cursor" });
      this.dynamicRouting.addItem({ text: "logout", path: "logout", icon: "icon-arrow-left-circle" });
    }
  
    /**
    * When called this method sets the required data into the navData object
    * @param
    * @method exportData
    * @return
    */
    exportData() {
      this.navData = [];
      let rawData = this.dynamicRouting.getLinks();
      let self = this;
      rawData.forEach(function(data) {
        let text = self.translate.transform("generic[nav_bar][categories][" + data.text + "][label]");
        self.navData.push({ name: text, url: data.path, icon: data.icon });
      });
      return this.navData;
    }
  }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;app-sidebar [fixed]="true" [display]="'lg'"&gt;
    &lt;app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"&gt;&lt;/app-sidebar-nav&gt;
    &lt;app-sidebar-minimizer class="custom-padding-bottom"&gt;&lt;/app-sidebar-minimizer&gt;
  &lt;/app-sidebar&gt;
  </code></pre>