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?
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']}
]
}];
}
}
<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.
According to documentation of Primeng TabMenu there is not such functionality given by them you can only set attribute there is not a single callback function by default for the same
Source:- * https://www.primefaces.org/primeng/#/tabmenu
Instead you can use breadcrumb for redirecting page there you can provide URL too, than style that breadcrumb according to your need with css
https://www.primefaces.org/primeng/#/breadcrumb
you can use this there you can call callback function and navigation as well in menu