feature-libs/product-configurator/rulebased/components/attribute/types/radio-button/configurator-attribute-radio-button.component.ts
ConfiguratorAttributeSingleSelectionBaseComponent
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cx-configurator-attribute-radio-button |
| templateUrl | ./configurator-attribute-radio-button.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(quantityService: ConfiguratorAttributeQuantityService)
|
||||||
|
Parameters :
|
| attribute | |
Type : Configurator.Attribute
|
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|
| ownerKey | |
Type : string
|
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|
| selectionChange | |
Type : EventEmitter
|
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| extractPriceFormulaParameters |
extractPriceFormulaParameters()
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|
Extract corresponding price formula parameters. For the single-selection attribute types the complete price formula should be displayed at the attribute level.
Returns :
ConfiguratorPriceComponentOptions
|
| extractQuantityParameters | ||||||||
extractQuantityParameters(form?: FormControl)
|
||||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
||||||||
|
Extract corresponding quantity parameters
Parameters :
|
| extractValuePriceFormulaParameters | ||||||||
extractValuePriceFormulaParameters(value?: Configurator.Value)
|
||||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
||||||||
|
Extract corresponding value price formula parameters. For the single-selection attribute types only value price should be displayed at the value level.
Parameters :
|
| Protected getInitialQuantity | ||||||
getInitialQuantity(form?: FormControl)
|
||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
||||||
|
Parameters :
Returns :
number
|
| Protected getSelectedValuePrice |
getSelectedValuePrice()
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|
Returns :
Configurator.PriceDetails | undefined
|
| onChangeQuantity | |||||||||
onChangeQuantity(eventObject: any, form?: FormControl)
|
|||||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
|||||||||
|
Parameters :
Returns :
void
|
| onHandleQuantity | ||||||
onHandleQuantity(quantity: number)
|
||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
||||||
|
Parameters :
Returns :
void
|
| onSelect | ||||||
onSelect(value: string)
|
||||||
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
||||||
|
Parameters :
Returns :
void
|
| attributeRadioButtonForm |
Default value : new FormControl('')
|
| attribute |
Type : Configurator.Attribute
|
Decorators :
@Input()
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
| loading$ |
Default value : new BehaviorSubject<boolean>(false)
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
| ownerKey |
Type : string
|
Decorators :
@Input()
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
| selectionChange |
Default value : new EventEmitter<ConfigFormUpdateEvent>()
|
Decorators :
@Output()
|
|
Inherited from
ConfiguratorAttributeSingleSelectionBaseComponent
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ConfiguratorAttributeQuantityService } from '../../quantity/configurator-attribute-quantity.service';
import { ConfiguratorAttributeSingleSelectionBaseComponent } from '../base/configurator-attribute-single-selection-base.component';
@Component({
selector: 'cx-configurator-attribute-radio-button',
templateUrl: './configurator-attribute-radio-button.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorAttributeRadioButtonComponent
extends ConfiguratorAttributeSingleSelectionBaseComponent
implements OnInit
{
attributeRadioButtonForm = new FormControl('');
constructor(protected quantityService: ConfiguratorAttributeQuantityService) {
super(quantityService);
}
ngOnInit(): void {
this.attributeRadioButtonForm.setValue(this.attribute.selectedSingleValue);
}
}
<fieldset>
<legend style="display: none">{{ attribute.label }}</legend>
<div id="{{ createAttributeIdForConfigurator(attribute) }}">
<div *ngIf="withQuantity" class="cx-attribute-level-quantity-price">
<cx-configurator-attribute-quantity
(changeQuantity)="onChangeQuantity($event)"
[quantityOptions]="extractQuantityParameters()"
></cx-configurator-attribute-quantity>
<cx-configurator-price
[formula]="extractPriceFormulaParameters()"
></cx-configurator-price>
</div>
<div class="form-check" *ngFor="let value of attribute.values">
<div class="cx-value-label-pair">
<input
id="{{
createAttributeValueIdForConfigurator(attribute, value.valueCode)
}}"
class="form-check-input"
type="radio"
formcontrolname="attributeRadioButtonForm"
[formControl]="attributeRadioButtonForm"
[attr.required]="attribute.required"
[value]="value.valueCode"
name="{{ createAttributeIdForConfigurator(attribute) }}"
attr.name="{{ createAttributeIdForConfigurator(attribute) }}"
[cxFocus]="{ key: attribute.name + '-' + value.name }"
attr.aria-labelledby="{{
createAriaLabelledBy('label', attribute.name, value.valueCode)
}}"
[attr.aria-checked]="
attributeRadioButtonForm.value === value.valueCode ? true : false
"
[attr.checked]="
attributeRadioButtonForm.value === value.valueCode
? 'checked'
: null
"
(change)="onSelect(value.valueCode)"
/>
<label
id="{{ createValueUiKey('label', attribute.name, value.valueCode) }}"
for="{{
createAttributeValueIdForConfigurator(attribute, value.valueCode)
}}"
class="form-check-label form-radio-label"
>{{ value.valueDisplay }}</label
>
</div>
<div class="cx-value-price">
<cx-configurator-price
[formula]="extractValuePriceFormulaParameters(value)"
></cx-configurator-price>
</div>
</div>
</div>
</fieldset>