src/app/layout/header/header.component.ts
changeDetection | ChangeDetectionStrategy.OnPush |
selector | app-header |
styleUrls | header.component.scss |
templateUrl | ./header.component.html |
constructor(store: Store
|
Defined in src/app/layout/header/header.component.ts:71
|
ngOnInit |
ngOnInit()
|
Defined in src/app/layout/header/header.component.ts:82
|
Returns:
void
|
selectTaxon |
selectTaxon(taxon: any)
|
Defined in src/app/layout/header/header.component.ts:88
|
Returns:
void
|
isAuthenticated |
isAuthenticated: |
Defined in src/app/layout/header/header.component.ts:20
|
taxonList |
taxonList: |
Defined in src/app/layout/header/header.component.ts:23
|
taxonomies$ |
taxonomies$: |
Defined in src/app/layout/header/header.component.ts:22
|
totalCartItems |
totalCartItems: |
Defined in src/app/layout/header/header.component.ts:21
|
import { Router } from '@angular/router';
import { SearchActions } from './../../home/reducers/search.actions';
import { getTaxonomies } from './../../product/reducers/selectors';
import { getTotalCartItems } from './../../checkout/reducers/selectors';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../../interfaces';
import { getAuthStatus } from '../../auth/reducers/selectors';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../../core/services/auth.service';
import { AuthActions } from '../../auth/actions/auth.actions';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent implements OnInit {
isAuthenticated: Observable<boolean>;
totalCartItems: Observable<number>;
taxonomies$: Observable<any>;
taxonList = [{
"id": 4,
"name": "Mugs",
"pretty_name": "Categories -> Mugs",
"permalink": "categories/mugs",
"parent_id": 1,
"taxonomy_id": 1,
"taxons": null},
{
"id": 3,
"name": "Bags",
"pretty_name": "Categories -> Bags",
"permalink": "categories/bags",
"parent_id": 1,
"taxonomy_id": 1,
"taxons": null
}, {
"id": 8,
"name": "Ruby",
"pretty_name": "Brand -> Ruby",
"permalink": "brand/ruby",
"parent_id": 2,
"taxonomy_id": 2,
"taxons": null
}, {
"id": 9,
"name": "Apache",
"pretty_name": "Brand -> Apache",
"permalink": "brand/apache",
"parent_id": 2,
"taxonomy_id": 2,
"taxons": null
}, {
"id": 10,
"name": "Spree",
"pretty_name": "Brand -> Spree",
"permalink": "brand/spree",
"parent_id": 2,
"taxonomy_id": 2,
"taxons": null
}, {
"id": 11,
"name": "Rails",
"pretty_name": "Brand -> Rails",
"permalink": "brand/rails",
"parent_id": 2,
"taxonomy_id": 2,
"taxons": null
}];
constructor(
private store: Store<AppState>,
private authService: AuthService,
private authActions: AuthActions,
private searchActions: SearchActions,
private router: Router
) {
this.taxonomies$ = this.store.select(getTaxonomies);
}
ngOnInit() {
this.store.dispatch(this.authActions.authorize());
this.isAuthenticated = this.store.select(getAuthStatus);
this.totalCartItems = this.store.select(getTotalCartItems);
}
selectTaxon(taxon) {
this.router.navigateByUrl('/');
this.store.dispatch(this.searchActions.addFilter(taxon));
}
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a href="https://github.com/aviabird/angularspree">
<img style="position: absolute; top: 0; right: 0; border: 0; height: 130px" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/"><img src="assets/logo.png" alt="Angular Spree"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li *ngFor="let taxon of taxonList" class="">
<a (click)="selectTaxon(taxon)" href="javascript:void(0)">{{taxon.name}}
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
<app-profile-dropdown [totalCartItems]="totalCartItems | async" [isAuthenticated]="isAuthenticated | async"></app-profile-dropdown>
<div class="desktop-query">
<input placeholder="Search" class="desktop-searchBar">
<a class="desktop-submit">
<span class="web-sprite desktop-iconSearch sprites-search"></span>
</a>
</div>
</div>
</div>
</nav>