Is there a way to do so? This is what i am trying thus for. I can do what I need, but this takes away from the ease of building the menu the way that the template does and it does not follow the style.
Code: Select all
export class AppMenuComponent implements OnInit {
model: MenuItem[];
loggedIn = false;
loginMenuItem: MenuItem = { label: 'Login', icon: 'ui-icon-verified-user', routerLink: ['/login'] };
logoutMenuItem: MenuItem = { label: 'Logout', icon: 'ui-icon-cancel', routerLink: ['/logout'] };
artistMenuItem: MenuItem = { label: 'Artists', icon: 'ui-icon-group', routerLink: ['/artists'] };
songsMenuItem: MenuItem = { label: 'Songs', icon: 'ui-icon-library-music', routerLink: ['/songs'] };
setListMenuItem: MenuItem = { label: 'Set Lists', icon: 'ui-icon-library-books', routerLink: ['/set-lists'] };
gigsMenuItem: MenuItem = { label: 'Gigs', icon: 'ui-icon-event-note', routerLink: ['/gigs'] };
signUpMenuItem: MenuItem = { label: 'Sign Up', icon: 'ui-icon-group-add', routerLink: ['/sign-up'] };
mainMenuItems = [this.artistMenuItem, this.songsMenuItem, this.setListMenuItem, this.gigsMenuItem];
constructor(
public app: AppMainComponent,
private loginService: LoginService,
private menuService: MenuService) {}
ngOnInit() {
this.loginMenuItem.visible = !this.loginService.isLoggedIn();
this.logoutMenuItem.visible = this.loginService.isLoggedIn();
this.mainMenuItems.forEach ( (menuItem: MenuItem) => {
menuItem.visible = this.loginService.isLoggedIn();
}
);
this.loginService.loggedInStatus$.subscribe(
(isLoggedIn: boolean) => {
this.loggedIn = isLoggedIn;
this.loginMenuItem.visible = !isLoggedIn;
this.logoutMenuItem.visible = isLoggedIn;
this.mainMenuItems.forEach ( (menuItem: MenuItem) => {
menuItem.visible = isLoggedIn;
});
}
);
this.model = [
{label: 'Dashboard', icon: 'dashboard', routerLink: ['/',], routerLinkActiveOptions: {exact: true} },
this.artistMenuItem,
this.songsMenuItem,
this.setListMenuItem,
this.gigsMenuItem,
this.signUpMenuItem,
this.loginMenuItem,
this.logoutMenuItem,
{
label: 'Components', icon: 'list', // routerLink: ['/components'],
items: [
{label: 'Sample Page', icon: 'desktop_mac', routerLink: ['/components/sample']},
{label: 'Forms', icon: 'input', routerLink: ['/components/forms']},
{label: 'Data', icon: 'grid_on', routerLink: ['/components/data']},
{label: 'Panels', icon: 'content_paste', routerLink: ['/components/panels']},
{label: 'Overlays', icon: 'content_copy', routerLink: ['/components/overlays']},
{label: 'Menus', icon: 'menu', routerLink: ['/components/menus']},
{label: 'Messages', icon: 'message', routerLink: ['/components/messages']},
{label: 'Charts', icon: 'insert_chart', routerLink: ['/components/charts']},
{label: 'File', icon: 'attach_file', routerLink: ['/components/file']},
{label: 'Misc', icon: 'toys', routerLink: ['/components/misc']}
]
},
...