src/app/components/navigation-bar/navigation-bar.component.ts
Navigation bar component
| selector | app-navigation-bar |
| styleUrls | navigation-bar.component.scss |
| templateUrl | ./navigation-bar.component.html |
Properties |
Methods |
constructor(auth: FirebaseAuthService)
|
||||||||
|
Constructor
Parameters :
|
| logout |
logout()
|
|
Logout user
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initlaize Component
Returns :
void
|
| Private log |
log:
|
Default value : Log.create('NavigationBarComponent')
|
|
Logger |
| Public user |
user:
|
Type : any
|
|
User |
import { Component, OnInit } from '@angular/core';
import { Log } from 'ng2-logger';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
/**
* Navigation bar component
* @author Daniel Sogl
*/
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit {
/** Logger */
private log = Log.create('NavigationBarComponent');
/** User */
public user: any;
/**
* Constructor
* @param {FirebaseAuthService} auth Firebase Auth Service
*/
constructor(private auth: FirebaseAuthService) {
this.auth.user.subscribe(user => {
if (user) {
this.user = user;
}
});
}
/**
* Initlaize Component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
}
/**
* Logout user
*/
logout() {
this.auth.signOut().then(() => {
this.user = null;
});
}
}
<header>
<!--Navbar-->
<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark indigo">
<!-- Navbar brand -->
<logo>
<a class="navbar-brand" routerLink="/" id="a_logo">
<img src="assets/logo.png" height="30" class="d-inline-block align-top" alt="logo"> EventPicKing
</a>
</logo>
<!-- Collapsible content -->
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/home" id="a_home">{{ 'NAV.HOME' | translate }} </a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/features" id="a_features">{{ 'NAV.FEATURES' | translate }} </a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/prices" id="a_prices">{{ 'NAV.PRICES' | translate }} </a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/search-photographer" id="a_prices">{{ 'NAV.SEARCH_PHOTOGRAPHER' | translate }} </a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" mdbRippleRadius routerLink="/search-events" id="a_prices">{{ 'NAV.SEARCH_EVENTS' | translate }} </a>
</li>
</ul>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item" *ngIf="!user">
<a class="nav-link waves-effect waves-light" routerLink="/signup" id="a_signup">
<span class="clearfix d-none d-sm-inline-block">{{ 'NAV.SIGNUP' | translate }}</span>
</a>
</li>
<li class="nav-item" *ngIf="!user">
<a class="nav-link waves-effect waves-light" routerLink="/login" id="a_login">
<i class="fa fa-sign-in mr-1"></i>
<span class="clearfix d-none d-sm-inline-block">{{ 'NAV.SIGNIN' | translate }}</span>
</a>
</li>
<li class="nav-item" *ngIf="user">
<a class="nav-link waves-effect waves-light" routerLink="/dashboard" id="a_dashboard">
<i class="fa fa-tachometer mr-1"></i>
<span class="clearfix d-none d-sm-inline-block">{{ 'NAV.DASHBOARD' | translate }}</span>
</a>
</li>
<li class="nav-item" *ngIf="user">
<a class="nav-link waves-effect waves-light" (click)="logout()" id="a_logout">
<i class="fa fa-sign-out mr-1"></i>
<span class="clearfix d-none d-sm-inline-block">{{ 'NAV.LOGOUT' | translate }}</span>
</a>
</li>
<li class="nav-item" *ngIf="!user?.roles.admin && !user?.roles.photographer">
<a class="nav-link waves-effect waves-light" routerLink="/cart">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
</ul>
</links>
<!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->
</header>