RouterLink url

Question

How to set Url for the nav bar items?https://ej2.syncfusion.com/angular/demos/#/bootstrap4/sidebar/sidebar-menuI need to set router link for menu items, I may need to set routerlink for main item text: 'Overview', or the sub items items: [ { text: 'Change Profile' }, { text: 'Add Name' }, { text: 'Add Details' } ] FinancialsWhen i click i need to show content on main pageJson from example public menuItems: MenuItemModel[] = [ { text: 'Overview', iconCss: 'icon-globe icon', items: [ { text: 'All Data' }, { text: 'Category2' }, { text: 'Category3' } ] }, { text: 'Notification', iconCss: 'icon-bell-alt icon', items: [ { text: 'Message' }, { text: 'Facebook' }, { text: 'Twitter' } ] }, { text: 'Comments', iconCss: 'icon-comment-inv-alt2 icon', items: [ { text: 'Category1' }, { text: 'Category2' }, { text: 'Category3' } ] }, { text: 'Bookmarks', iconCss: 'icon-bookmark icon', items: [ { text: 'All Comments' }, { text: 'Add Comments' }, { text: 'Delete Comments' } ] }, { text: 'Images', iconCss: 'icon-picture icon', items: [ { text: 'Add Name' }, { text: 'Add Mobile Number' }, { text: 'Add Imaage' }, ] }, { text: 'Users ', iconCss: 'icon-user icon', items: [ { text: 'Mobile1' }, { text: 'Mobile2' }, { text: 'Telephone' } ] }, { text: 'Settings', iconCss: 'icon-eye icon', items: [ { text: 'Change Profile' }, { text: 'Add Name' }, { text: 'Add Details' } ] }, { text: 'Info', iconCss: 'icon-tag icon', items: [ ] } ];

Mohan Kumar Ramasamy · Accepted Answer

Hi Vin, 
 
We have checked your reported query. We can achieve your requirement using router. Please refer below sample link and code snippets. 
 
Link: https://stackblitz.com/edit/angular-qf9vi1-mamuvd?file=app.component.ts  
 
Code Snippets 
 
App.module.ts 




 
const routes = [ 
  { 
    path: 'products', component: ProductsComponent, text: 'Products', 
    children: [ 
      { path: 'javascript', component: JavaScriptComponent, text: 'JavaScript' }, 
      { path: 'angular', component: AngularComponent, text: 'Angular' } 
    ] 
  }, 
  { path: 'services', component: ServicesComponent, text: 'Services' }, 
  { path: 'about', component: AboutComponent, text: 'About Us' }, 
  { text: 'Careers', component: ProductsComponent, path:'' }, 
  { text: 'Sign In', component: ProductsComponent, path:'' } 
]; 
 
@NgModule({  
    
  declarations: [ AppComponent,ServicesComponent, ProductsComponent, JavaScriptComponent, AboutComponent, AngularComponent ], imports: [ SidebarModule, BrowserModule, RadioButtonModule, MenuAllModule, DropDownListModule, ButtonModule, TreeViewAllModule, ListViewAllModule,RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],providers: [{ provide: APP_BASE_HREF, useValue: window.location.pathname }], bootstrap: [AppComponent] 
}) 
 
app.component.ts 




 
export class AppComponent { 
    @ViewChild('sidebarMenuInstance') 
    public sidebarMenuInstance: SidebarComponent; 
    public width: string = '220px'; 
    public mediaQuery: string = ('(min-width: 600px)'); 
    public target: string = '.main-content'; 
    public dockSize: string = '50px'; 
     public enableDock: boolean = true; 
    public menuItems: any[]; 
    public navigationId: number; 
 
    constructor(private router: Router) { 
      this.menuItems = this.mapItems(router.config); 
} 
 // convert the routes to menu items. 
    private mapItems(routes: any[], path?: string): any[] { 
        return routes.map(menuItems => { 
            const result: any = { 
                text: menuItems.text, 
                path: (path ? `${ path }/` : '') + menuItems.path 
            }; 
            if (menuItems.children) { 
                result.items = this.mapItems(menuItems.children, menuItems.path); 
            } 
            return result; 
        }); 
    } 
 
    ngOnInit(){ 
      this.router.navigate([ 'products' ]); 
    } 
} 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R