src/app/header/header.component.ts
The header component.
| selector | app-header |
| styleUrls | header.component.scss |
| templateUrl | ./header.component.html |
Properties |
Methods |
|
constructor(languageService: LanguageService)
|
||||||
|
Defined in src/app/header/header.component.ts:30
|
||||||
|
Set default language
Parameters :
|
| Public closeLanguageSelect |
closeLanguageSelect()
|
|
Defined in src/app/header/header.component.ts:63
|
|
Close language dropdown menu
Returns :
void
void |
| Public hideHeader |
hideHeader()
|
|
Defined in src/app/header/header.component.ts:79
|
|
Hide header trigger
Returns :
void
void |
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/header/header.component.ts:47
|
|
Lifecycle hook that is called after data-bound properties of a directive are initialized.
Returns :
void
void |
| Public openLanguageSelect |
openLanguageSelect()
|
|
Defined in src/app/header/header.component.ts:55
|
|
Open language dropdown menu
Returns :
void
void |
| Public toggleDropdown |
toggleDropdown()
|
|
Defined in src/app/header/header.component.ts:71
|
|
Toggle dropdown menu
Returns :
void
void |
| isDropDownOpen |
isDropDownOpen:
|
Type : boolean
|
Default value : false
|
|
Defined in src/app/header/header.component.ts:29
|
| isHeaderHidden |
isHeaderHidden:
|
Type : boolean
|
Default value : false
|
|
Defined in src/app/header/header.component.ts:30
|
| languages |
languages:
|
Type : Array<Language>
|
|
Defined in src/app/header/header.component.ts:27
|
| LanguageSelect |
LanguageSelect:
|
Type : NgSelectComponent
|
Decorators : ViewChild
|
|
Defined in src/app/header/header.component.ts:25
|
|
The dropdown menu LanguageSelect ng-select. |
| selectedLanguage |
selectedLanguage:
|
Type : number
|
|
Defined in src/app/header/header.component.ts:28
|
import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {Language} from '../models/language';
import {LanguageService} from '../services/language.service';
import { NgSelectComponent } from '@ng-select/ng-select';
/**
* The header component.
*/
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
/**
* @class HeaderComponent
* @implements OnInit
*/
export class HeaderComponent implements OnInit {
/**
* The dropdown menu LanguageSelect ng-select.
* @typedef NgSelectComponent
*/
@ViewChild('LanguageSelect') LanguageSelect: NgSelectComponent;
languages: Array<Language>;
selectedLanguage: number;
isDropDownOpen: boolean = false;
isHeaderHidden: boolean = false;
/**
* Set default language
* @constructor
* @param {languageService} LanguageService - Change language handler
*/
constructor(private languageService: LanguageService) {
this.languages = languageService.getLanguages();
this.selectedLanguage = this.languages[0].id;
}
/**
* Lifecycle hook that is called after data-bound
* properties of a directive are initialized.
* @returns void
*/
ngOnInit(): void {
}
/**
* Open language dropdown menu
* @returns void
*/
public openLanguageSelect(): void {
this.isDropDownOpen = true;
}
/**
* Close language dropdown menu
* @returns void
*/
public closeLanguageSelect(): void {
this.isDropDownOpen = false;
}
/**
* Toggle dropdown menu
* @returns void
*/
public toggleDropdown(): void {
this.LanguageSelect.open();
}
/**
* Hide header trigger
* @returns void
*/
public hideHeader(): void {
this.isHeaderHidden = true;
}
}
<header class="header" [ngClass]="{'d-none': isHeaderHidden}">
<!--Desktop header -->
<div class="d-none d-sm-block">
<div class="row">
<div class="header__left col">
<h4 class="header__left__made"> ⚇ Made by Kiskin </h4>
</div>
<div class="header__right col">
<div class="header__right__contact float-right">
<button class="btn btn-success">Contact</button>
<a class="header__close" (click)="hideHeader()" href="javascript:">
<i class="material-icons">cancel</i>
</a>
</div>
</div>
</div>
</div>
<!--Mobile header -->
<div class="mobile d-sm-none">
<div class="row">
<div class="col">
<div class="header__select__wrapper">
<ng-select #LanguageSelect class="custom"
[items]="languages"
bindLabel="name"
bindValue="id"
[searchable]="false"
[clearable]="false"
(open)="openLanguageSelect()"
(close)="closeLanguageSelect()"
[(ngModel)]="selectedLanguage">
<ng-template ng-label-tmp let-item="item">
<b>{{item.short}}</b>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index">
<b>{{item.name}}</b>
</ng-template>
</ng-select>
<span class="header__select__wrapper__arrow"
(click)="toggleDropdown()"
[ngClass]="{'arrow-up': isDropDownOpen, 'arrow-down': !isDropDownOpen}">
<i class="material-icons">arrow_drop_down</i>
</span>
</div>
</div>
<div class="col">
<div class="header__right">
<div class="float-right">
<a class="header__email" href>
<i class="material-icons">email</i>
</a>
<a class="header__close" (click)="hideHeader()" href="javascript:">
<i class="material-icons">cancel</i>
</a>
</div>
</div>
</div>
</div>
</div>
</header>