File

src/app/product/components/product-detail-page/product-variants/product-variants.component.ts

Implements

OnInit

Metadata

selector app-product-variants
styleUrls product-variants.component.scss
templateUrl ./product-variants.component.html

Inputs

correspondingOptions
currentSelectedOptions
customOptionTypesHash

Type: any

mainOptions

Outputs

onOptionClickEvent $event type: EventEmitter

Constructor

constructor()

Methods

ngOnInit
ngOnInit()
Returns: void
onOptionClick
onOptionClick(option: any)
Returns: void
isDisabled
isDisabled(arrayTocheck: any, value: any)
Returns: void
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Product } from './../../../../core/models/product';
import { VariantParserService } from './../../../../core/services/variant-parser.service';

interface CurrentSelectedOptionsType {
  [key: string]: String;
};

@Component({
  selector: 'app-product-variants',
  templateUrl: './product-variants.component.html',
  styleUrls: ['./product-variants.component.scss']
})
export class ProductVariantsComponent implements OnInit {
  @Input() customOptionTypesHash: any;
  @Input() currentSelectedOptions = {};
  @Input() mainOptions;
  @Input() correspondingOptions;
  @Output() onOptionClickEvent = new EventEmitter();
  constructor() {
  }

  ngOnInit() {
  }

  onOptionClick(option) {
    this.onOptionClickEvent.emit(option);
  }

  isDisabled(arrayTocheck, value) {
    return (arrayTocheck.indexOf(value) === -1);
  }

}
<div *ngFor="let variant of (customOptionTypesHash | keys)">
  <div class="size-buttons-size-header">
    <h6>{{ variant.key }}</h6>
  </div>
  <button class="option-buttons" 
    *ngFor="let options of (variant.value | keys)" (click)="onOptionClick(options)"
    [class.selected]="options.key === currentSelectedOptions[variant.key]"
    [ngClass]="{'disabled': isDisabled(correspondingOptions[variant.key], options.value['optionValue'].name)}">
    <p>
      {{ options.value["optionValue"].presentation }}
      <span class="strike"></span>
    </p>
  </button>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""