Tab Menu in prime ng

Question

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

<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 conatct menu I want to load contactcomponent.html and when click on call logs menu load calllogscomponent.html. How can I implement this?

Solution 1

If this is your top-level menu (or you want the main page URL to be set) then consider using the router. This will automatically sync with the current 'page' set in the router:

https://www.primefaces.org/primeng/#/menumodel

export class MenuDemo implements OnInit {

    private items: MenuItem[];

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

Solution 2

<p-tabMenu #menuItems [model]="items" [activeItem]="activeItem" (click)="activateMenu()"></p-tabMenu>

items:MenuItem[];
activeItem: MenuItem;
@ViewChild('menuItems') menu: MenuItem[];

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

activateMenu(){
   this.activeItem =this.menu['activeItem'];
}

Create template reference variable #menuItems and use it in ts to do modifications on that template.On click of another menu it triggers activateMenu() function where it sets the new selected menu as an active one.In html toggle between two menu using *ngIf comparing with the activeItem.label.

This works for me.