src/app/main-head/main-head.component.ts
The main-head component
| selector | app-main-head |
| styleUrls | main-head.component.scss |
| templateUrl | ./main-head.component.html |
Properties |
Methods |
|
constructor(languageService: LanguageService)
|
||||||
|
Defined in src/app/main-head/main-head.component.ts:29
|
||||||
|
Get languages, set dafault language
Parameters :
|
| Public closeLanguageSelect |
closeLanguageSelect()
|
|
Defined in src/app/main-head/main-head.component.ts:60
|
|
Close language dropdown menu
Returns :
void
void |
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/main-head/main-head.component.ts:46
|
|
Lifecycle hook that is called after data-bound properties of a directive are initialized.
Returns :
void
void |
| Public openLanguageSelect |
openLanguageSelect()
|
|
Defined in src/app/main-head/main-head.component.ts:52
|
|
Open language dropdown menu
Returns :
void
void |
| Public toggleDropdown |
toggleDropdown()
|
|
Defined in src/app/main-head/main-head.component.ts:68
|
|
Toggle dropdown menu
Returns :
void
void |
| isDropDownOpen |
isDropDownOpen:
|
Type : boolean
|
Default value : false
|
|
Defined in src/app/main-head/main-head.component.ts:29
|
| languages |
languages:
|
Type : Array<Language>
|
|
Defined in src/app/main-head/main-head.component.ts:27
|
| LanguageSelect |
LanguageSelect:
|
Type : NgSelectComponent
|
Decorators : ViewChild
|
|
Defined in src/app/main-head/main-head.component.ts:25
|
|
The dropdown menu LanguageSelect ng-select. |
| selectedLanguage |
selectedLanguage:
|
Type : any
|
|
Defined in src/app/main-head/main-head.component.ts:28
|
import {Component, OnInit, ViewChild} from '@angular/core';
import {Language} from '../models/language';
import {LanguageService} from '../services/language.service';
import { NgSelectComponent } from '@ng-select/ng-select';
/**
* The main-head component
*/
@Component({
selector: 'app-main-head',
templateUrl: './main-head.component.html',
styleUrls: ['./main-head.component.scss']
})
/**
* @class MainHeadComponent
* @implements OnInit
*/
export class MainHeadComponent implements OnInit {
/**
* The dropdown menu LanguageSelect ng-select.
* @typedef NgSelectComponent
*/
@ViewChild('LanguageSelect') LanguageSelect: NgSelectComponent;
languages: Array<Language>;
selectedLanguage: any;
isDropDownOpen: boolean = false;
/**
* Get languages, set dafault language
* @constructor
* @param {LanguageService} languageService
*/
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();
}
}
<div class="main-head">
<div class="container">
<div class="row d-none d-md-block">
<div class="col-md">
<div class="float-left main-head__brand">
<span>This template created by Kiskin Vladyslav</span>
</div>
</div>
<div class="col-md">
<div class="float-right">
<ul class="list-inline">
<li class="main-head__li">
<span>Email me:</span>
<span>kiskinvlad@gmail.com</span>
</li>
<li class="main-head__li">
<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 (click)="toggleDropdown()"
class="header__select__wrapper__arrow"
[ngClass]="{'arrow-up': isDropDownOpen, 'arrow-down': !isDropDownOpen}">
<i class="material-icons">arrow_drop_down</i>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="main-head__info_wrapper">
<div class="row">
<div class="col-md-4 col-12">
<div class="main-head__brand_wrapper">
<div class="main-head__brand_wrapper__icon_wrapper">
<div class="main-head__brand_icon"></div>
</div>
<div class="main-head__brand_wrapper__text_wrapper">
<h3>K-Landing #2</h3>
<span>Klanding template</span>
</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="main-head__col_wrapper">
<h4>Landing page #2</h4>
<span>created by Kiskin</span>
</div>
</div>
<div class="col-md-2 col-4">
<div class="main-head__col_wrapper">
<h4>Global Certificate</h4>
<span>ISO certificate id:year</span>
</div>
</div>
<div class="col-md-2 col-4">
<div class="main-head__col_wrapper">
<h4>Third col</h4>
<span>Information on third col</span>
</div>
</div>
<div class="col-md-2 col-12">
<div class="main-head__button_wrapper">
<button>Push Me</button>
</div>
</div>
</div>
</div>
</div>
</div>