### File

`src/app/layout/header/header.component.ts`

### Implements

`OnInit`

### Metadata

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

### Constructor

`constructor(store: Store, authService: AuthService, authActions: AuthActions, searchActions: SearchActions, router: Router)`
Defined in src/app/layout/header/header.component.ts:71

### Methods

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`

### Properties

isAuthenticated
`isAuthenticated: `Observable<boolean>``
Defined in src/app/layout/header/header.component.ts:20

taxonList
`taxonList: `{ "id": number; "name": string; "pretty_name": string; "permalink": string; "parent_id": number; ...``
Defined in src/app/layout/header/header.component.ts:23

taxonomies$
`taxonomies$: `Observable<any>``
Defined in src/app/layout/header/header.component.ts:22

totalCartItems
`totalCartItems: `Observable<number>``
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>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""