RouterLink url

[vin]

     How to set Url for the nav bar items?

https://ej2.syncfusion.com/angular/demos/#/bootstrap4/sidebar/sidebar-menu

I 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' }

            ]

  <a routerLink="/project-charts/financials" routerLinkActive="active"> Financials</a>

When i click i need to show content on main page

Json 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]

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