this.items ...">

Tab menu in main

I want to load a component template in the tab menu.

<p-tabMenu class="ui-tabmenu" [model]="items"></p-tabMenu>

this.items = [
    {label: 'Contacts', icon: 'fa-bar-chart'},
    {label: 'Call Logs', icon: 'fa-calendar'} 


This is my code. It shows two menu contacts and call logs. when i click on the conatct menu i want to download contactcomponent.html

and when i click on the download logs logs menu calllogscomponent.html

. How to implement this?


source to share

2 answers

If this is your top-level menu (or if you want to set the URL of the homepage), consider using a router. This will automatically sync with the current "page" set in the router:

export class MenuDemo implements OnInit {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa-plus', url: ''},
                {label: 'Open', icon: 'fa-download', routerLink: ['/pagename']}




According to Primeng's TabMenu documentation, there is no functionality you give them, you can only set the attribute, defaults to the same

Source: - *

Instead, you can use breadcrumb

to redirect the page where you can also specify a url, not a style that can be found according to your needs with css


you can use this there, you can call the callback and navigation function and also in the menu



All Articles