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?

Answer 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']}
            ]
        }];
    }
}