File
Implements
Metadata
| selector |
crm-header |
| styleUrls |
header.component.scss |
| templateUrl |
./header.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
isOpen
|
isOpen:
|
Default value : false
|
|
|
|
Private
profileStateSubscription
|
profileStateSubscription: Subscription
|
Type : Subscription
|
|
|
|
Private
subscription
|
subscription: Subscription
|
Type : Subscription
|
|
|
import {Component, OnInit, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs";
import {AuthService} from "../../core/auth/auth.service";
import {ProfileService} from "../../core/profile/profile.service";
import {Router} from "@angular/router";
import {NotificationsService} from "../../core/notifications/notifications.service";
import {Profile} from "../../core/models/profile/profile.model";
@Component({
selector: 'crm-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit, OnDestroy {
profile: Profile;
private profileStateSubscription: Subscription;
private isOpen = false;
private subscription: Subscription;
constructor(private authService: AuthService,
private profileService: ProfileService,
private router: Router,
private notificationsService: NotificationsService) {
}
ngOnInit() {
this.profile = this.profileService.getLocalProfile();
this.profileStateSubscription = this.profileService.profileState.subscribe(profile => this.profile = profile);
}
ngOnDestroy() {
this.profileStateSubscription.unsubscribe();
if (typeof this.subscription !== 'undefined') {
this.subscription.unsubscribe();
}
}
logout() {
this.subscription = this.authService.signOut().subscribe(
ok => this.router.navigate(['/auth']),
error => this.notificationsService.error(error.json().message)
)
}
}
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler hidden-lg-up" type="button">☰</button>
<a class="navbar-brand" href="#"></a>
<ul class="nav navbar-nav hidden-md-down">
<li class="nav-item">
<a class="nav-link navbar-toggler sidebar-toggler" href="#">☰</a>
</li>
<li class="nav-item px-1">
<a class="nav-link" href="#">{{profile?.user?.company?.name}}</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown" dropdown>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" role="button" aria-haspopup="true" aria-expanded="false" dropdownToggle>
<img src="{{profile.avatarUrl}}" class="img-avatar" alt="{{profile.nickname}}">
<span class="hidden-md-down" *ngIf="profile.firstName && profile.lastName">{{profile.firstName}} {{profile.lastName}}</span>
<span class="hidden-md-down" *ngIf="!profile.firstName || !profile.lastName">{{profile.nickname}}</span>
</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" [routerLink]="['/profile']"><i class="fa fa-user"></i> Profile</a>
<a class="dropdown-item" href="#" (click)="logout()"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
<li class="nav-item hidden-md-down">
<!--<a class="nav-link navbar-toggler aside-menu-toggler" href="#">☰</a>-->
</li>
</ul>
</header>
Legend
Html element with directive