File
Implements
Metadata
selector |
app-product-variants |
styleUrls |
product-variants.component.scss |
templateUrl |
./product-variants.component.html |
customOptionTypesHash
|
Type: any
|
|
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 with directive