File
Implements
Metadata
| selector |
app-header |
| styleUrls |
header.component.scss |
| templateUrl |
./header.component.html |
Constructor
constructor(translate: TranslateService, router: Router)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| translate |
TranslateService
|
|
|
| router |
Router
|
|
|
|
Methods
|
changeLang
|
changeLang(language: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
Description |
| language |
string
|
|
|
|
|
onLoggedout
|
onLoggedout()
|
|
|
|
|
|
toggleSidebar
|
toggleSidebar()
|
|
|
|
|
|
pushRightClass
|
pushRightClass: string
|
Type : string
|
Default value : push-right
|
|
|
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
pushRightClass: string = 'push-right';
constructor(private translate: TranslateService, public router: Router) {
this.router.events.subscribe((val) => {
if (val instanceof NavigationEnd && window.innerWidth <= 992 && this.isToggled()) {
this.toggleSidebar();
}
});
}
ngOnInit() {}
isToggled(): boolean {
const dom: Element = document.querySelector('body');
return dom.classList.contains(this.pushRightClass);
}
toggleSidebar() {
const dom: any = document.querySelector('body');
dom.classList.toggle(this.pushRightClass);
}
rltAndLtr() {
const dom: any = document.querySelector('body');
dom.classList.toggle('rtl');
}
onLoggedout() {
localStorage.removeItem('isLoggedin');
}
changeLang(language: string) {
this.translate.use(language);
}
}
<div class="pos-f-t fixed-top header">
<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" (click)="toggleSidebar()">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand font-responsive" routerLink="/dashboard" [routerLinkActive]="['router-link-active']" href="javascript:void(0)">Vocabulary in Reading Study</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mt-2 mt-md-0">
<li class="nav-item dropdown" ngbDropdown>
<a href="javascript:void(0)" class="nav-link" style="color: white;" ngbDropdownToggle>
<i class="fa fa-language"></i> {{ 'language' | translate }} <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('en')">English</a>
<a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('fa')">Farsi</a>
<a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('es')">Spanish</a>
</div>
</li>
<!--Hidding the admin dropdown menu-->
<li class="nav-item dropdown" ngbDropdown *ngIf='false'>
<a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
<i class="fa fa-user"></i> Admin <b class="caret"></b>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-fw fa-gear"></i> Settings</a>
<a class="dropdown-item" [routerLink]="['/dashboard']" (click)="onLoggedout()"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
Legend
Html element with directive