File

src/app/app.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-root
styleUrls app.component.scss
templateUrl ./app.component.html

Constructor

constructor(router: Router, checkoutService: CheckoutService, store: Store)

Methods

ngOnInit
ngOnInit()
Returns: void
isCheckoutRoute
isCheckoutRoute()
Returns: void
Private findCurrentStep
findCurrentStep(currentRoute: any)
Returns: void
ngOnDestroy
ngOnDestroy()
Returns: void

Properties

checkoutUrls
checkoutUrls: string[]
currentStep
currentStep: string
currentUrl
currentUrl: string
orderSub$
orderSub$: Subscription
import { getAuthStatus } from './auth/reducers/selectors';
import { AppState } from './interfaces';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { CheckoutService } from './core/services/checkout.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  orderSub$: Subscription;
  currentUrl: string;
  currentStep: string;
  checkoutUrls = ['/checkout/cart', '/checkout/address', '/checkout/payment'];

  constructor(
    private router: Router,
    private checkoutService: CheckoutService,
    private store: Store<AppState>
    ) {
    router
      .events
      .filter(e => e instanceof NavigationEnd)
      .subscribe((e: NavigationEnd) => {
        this.currentUrl = e.url;
        this.findCurrentStep(this.currentUrl);
        window.scrollTo(0, 0);
      });
  }

  ngOnInit() {
    this.store.select(getAuthStatus).
      subscribe(() => {
        this.orderSub$ = this.checkoutService.fetchCurrentOrder()
          .subscribe();
      });
  }

  isCheckoutRoute() {
    if (!this.currentUrl) {
      return false;
    }
    const index = this.checkoutUrls.indexOf(this.currentUrl);
    if (index >= 0) {
      return true;
    } else {
      return false;
    }
  }

  private findCurrentStep(currentRoute) {
    const currRouteFragments = currentRoute.split('/');
    const length = currRouteFragments.length;
    this.currentStep = currentRoute.split('/')[length - 1];
  }

  ngOnDestroy() {
    this.orderSub$.unsubscribe();
  }

}
<div class="default">
  <section>
    <app-header *ngIf="currentUrl && !isCheckoutRoute()"></app-header>
    <app-checkout-header [currentStep]="currentStep" *ngIf="currentUrl && isCheckoutRoute()"></app-checkout-header>
    <app-loading-indicator></app-loading-indicator>
    <app-notification></app-notification>

    <main class="body container">
      <router-outlet></router-outlet>
    </main>

    <app-checkout-footer *ngIf="currentUrl && isCheckoutRoute()"></app-checkout-footer>
    <app-footer *ngIf="currentUrl && !isCheckoutRoute()"></app-footer>
  </section>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""