### 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)`
Defined in src/app/app.component.ts:18

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/app.component.ts:35
Returns: `void`

isCheckoutRoute
`isCheckoutRoute()`
Defined in src/app/app.component.ts:43
Returns: `void`

Private findCurrentStep
`findCurrentStep(currentRoute: any)`
Defined in src/app/app.component.ts:55
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/app.component.ts:61
Returns: `void`

### Properties

checkoutUrls
`checkoutUrls: `string[]``
Defined in src/app/app.component.ts:18

currentStep
`currentStep: `string``
Defined in src/app/app.component.ts:17

currentUrl
`currentUrl: `string``
Defined in src/app/app.component.ts:16

orderSub$
`orderSub$: `Subscription``
Defined in src/app/app.component.ts:15

    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 ""