### 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` |
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:18

`currentSelectedOptions` |
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:16

`customOptionTypesHash` | Type: `any`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:15

`mainOptions` |
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:17

### Outputs

`onOptionClickEvent` | `$event` type: `EventEmitter`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:19

### Constructor

`constructor()`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:19

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:23
Returns: `void`

onOptionClick
`onOptionClick(option: any)`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:26
Returns: `void`

isDisabled
`isDisabled(arrayTocheck: any, value: any)`
Defined in src/app/product/components/product-detail-page/product-variants/product-variants.component.ts:30
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 ""