### File

`src/app/shared/components/header/header.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-header`
styleUrls | `header.component.scss`
templateUrl | `./header.component.html`

### Index

###### Properties
pushRightClass Public router
###### Methods
changeLang isToggled ngOnInit onLoggedout rltAndLtr toggleSidebar

### Constructor

`constructor(translate: TranslateService, router: Router)`
Defined in src/app/shared/components/header/header.component.ts:12
Parameters :
Name | Type | Optional | Description
translate | `TranslateService` |  |
router | `Router` |  |

### Methods

changeLang
`changeLang(language: string)`
Defined in src/app/shared/components/header/header.component.ts:43
Parameters :
Name | Type | Optional | Description
language | `string` |  |
Returns : `void`

isToggled
`isToggled()`
Defined in src/app/shared/components/header/header.component.ts:24
Returns : `boolean`

ngOnInit
`ngOnInit()`
Defined in src/app/shared/components/header/header.component.ts:22
Returns : `void`

onLoggedout
`onLoggedout()`
Defined in src/app/shared/components/header/header.component.ts:39
Returns : `void`

rltAndLtr
`rltAndLtr()`
Defined in src/app/shared/components/header/header.component.ts:34
Returns : `void`

toggleSidebar
`toggleSidebar()`
Defined in src/app/shared/components/header/header.component.ts:29
Returns : `void`

### Properties

pushRightClass
`pushRightClass: `string``
Type : `string`
Default value : `push-right`
Defined in src/app/shared/components/header/header.component.ts:12

Public router
`router: `Router``
Type : `Router`
Defined in src/app/shared/components/header/header.component.ts:14

    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
Component
Html element with directive

# results matching ""

# No results matching ""