### File

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

### Implements

`OnInit`

### Metadata

selector | `app-checkout-header`
styleUrls | `checkout-header.component.scss`
templateUrl | `./checkout-header.component.html`

### Inputs

`currentStep` | Type: `string`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:11

### Constructor

`constructor(router: Router)`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:12

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:16
Returns: `void`

isActiveRoute
`isActiveRoute(step: any)`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:19
Returns: `void`

checkIfClickable
`checkIfClickable(clickStep: any)`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:30
Returns: `void`

getRouterLink
`getRouterLink(step: any)`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:34
Returns: `void`

isLinkAccessible
`isLinkAccessible(step: any)`
Defined in src/app/layout/checkout-header/checkout-header.component.ts:43
Returns: `void`

### Properties

Private checkoutStep
`checkoutStep: `string[]``
Defined in src/app/layout/checkout-header/checkout-header.component.ts:12

    import { Component, OnInit, Input } from '@angular/core';
    import { Router, NavigationStart } from '@angular/router';

    @Component({
      selector: 'app-checkout-header',
      templateUrl: './checkout-header.component.html',
      styleUrls: ['./checkout-header.component.scss']
    })
    export class CheckoutHeaderComponent implements OnInit {

      @Input() currentStep: string;
      private checkoutStep = ['cart', 'address', 'payment'];
      constructor(private router: Router) {
      }

      ngOnInit() {
      }

      isActiveRoute(step) {
        if (!this.currentStep) {
          return false;
        }
        if (step === this.currentStep) {
          return true;
        } else {
          return false;
        }
      }

      checkIfClickable(clickStep) {
        return this.isLinkAccessible(clickStep);
      }

      getRouterLink(step) {
        const isAccessible = this.isLinkAccessible(step);
        let link = [];
        if (isAccessible) {
          link = ['/checkout', step];
        }
        return link;
      }

      isLinkAccessible(step) {
        if (!this.currentStep) {
          return false;
        }
        const currentStepIndex = this.checkoutStep.indexOf(this.currentStep);
        const stepIndex = this.checkoutStep.indexOf(step);

        if (stepIndex <= currentStepIndex) {
          return true;
        } else {
          return false;
        }
      }

    }

    <div class="checkout-header">
      <div class="full-container">
        <a class="navbar-brand" routerLink="/"><img src="assets/logo.png" alt="Angular Spree"></a>
        <ol class="checkout-steps">
          <li class="step step1">
            <a [ngClass]="{'can-click': checkIfClickable('cart'), 'active': isActiveRoute('cart')}" [routerLink]="getRouterLink('cart')">Bag</a>
          </li>
          <li class="divider"></li>
          <li class="step step2">
            <a [ngClass]="{'can-click': checkIfClickable('address'), 'active': isActiveRoute('address')}" [routerLink]="getRouterLink('address')">Delivery</a>
          </li>
          <li class="divider"></li>
          <li class="step step3">
            <a [ngClass]="{'can-click': checkIfClickable('payment'), 'active': isActiveRoute('payment')}" [routerLink]="getRouterLink('payment')">Payment</a>
          </li>
        </ol>
      </div>
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""