File
Implements
Metadata
selector |
ngx-header |
styleUrls |
header.component.scss |
templateUrl |
./header.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Constructor
constructor(sidebarService: NbSidebarService, menuService: NbMenuService, userService: UserService, analyticsService: AnalyticsService)
|
|
Parameters :
Name |
Type |
Optional |
sidebarService |
NbSidebarService
|
no
|
menuService |
NbMenuService
|
no
|
userService |
UserService
|
no
|
analyticsService |
AnalyticsService
|
no
|
|
position
|
Default value: 'normal'
|
|
Methods
startSearch
|
startSearch()
|
|
|
toggleSettings
|
toggleSettings()
|
|
|
toggleSidebar
|
toggleSidebar()
|
|
|
userMenu
|
userMenu: []
|
Type : []
|
Default value : [{title: 'پروفایل', link: '/pages/users/profile'}, {title: 'خروج', url: '/auth/login'}]
|
|
import {Component, Input, OnInit} from '@angular/core';
import {NbMenuService, NbSidebarService} from '@nebular/theme';
import {UserService} from '../../../@core/data/users.service';
import {AnalyticsService} from '../../../@core/utils/analytics.service';
@Component({
selector: 'ngx-header',
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
@Input() position = 'normal';
user: any;
userMenu = [{title: 'پروفایل', link: '/pages/users/profile'}, {title: 'خروج', url: '/auth/login'}];
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private userService: UserService,
private analyticsService: AnalyticsService) {
}
ngOnInit() {
this.userService.getUsers()
.subscribe((users: any) => this.user = users.nick);
}
toggleSidebar(): boolean {
this.sidebarService.toggle(true, 'menu-sidebar');
return false;
}
toggleSettings(): boolean {
this.sidebarService.toggle(false, 'settings-sidebar');
return false;
}
goToHome() {
this.menuService.navigateHome();
}
startSearch() {
this.analyticsService.trackEvent('startSearch');
}
}
<div class="header-container"
[class.left]="position === 'normal'"
[class.right]="position === 'inverse'">
<div class="logo-containter">
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
<div i18n="chidna_panel" class="logo" (click)="goToHome()"> {{'HEADER.PANEL' | translate}} <span>{{'HEADER.CHIDNA' | translate}}</span>
</div>
</div>
<ngx-theme-switcher></ngx-theme-switcher>
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
</div>
<nb-actions
size="medium"
class="header-container"
[class.right]="position === 'normal'"
[class.left]="position === 'inverse'">
<!--<nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>-->
<nb-action *nbIsGranted="['view', 'user']">
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
<nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
<nb-action class="control-item" icon="nb-email"></nb-action>
<!--<nb-action class="control-item">-->
<!--<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>-->
<!--</nb-action>-->
</nb-actions>
Legend
Html element with directive