src/app/layout/checkout-header/checkout-header.component.ts
selector | app-checkout-header |
styleUrls | checkout-header.component.scss |
templateUrl | ./checkout-header.component.html |
currentStep
|
Type: |
constructor(router: Router)
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
isActiveRoute |
isActiveRoute(step: any)
|
Returns:
void
|
checkIfClickable |
checkIfClickable(clickStep: any)
|
Returns:
void
|
getRouterLink |
getRouterLink(step: any)
|
Returns:
void
|
isLinkAccessible |
isLinkAccessible(step: any)
|
Returns:
void
|
Private checkoutStep |
checkoutStep: |
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>