Back to Vendure

CurrencyInputComponent

docs/docs/reference/admin-ui-api/components/currency-input-component.mdx

3.7.32.9 KB
Original Source
<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/shared/components/currency-input/currency-input.component.ts" sourceLine="33" packageName="@vendure/admin-ui" />

A form input control which displays currency in decimal format, whilst working with the integer cent value in the background.

Example

HTML
<vdr-currency-input
    [(ngModel)]="entityPrice"
    [currencyCode]="currencyCode"
></vdr-currency-input>
ts
class CurrencyInputComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
    @Input() disabled = false;
    @Input() readonly = false;
    @Input() value: number;
    @Input() currencyCode = '';
    @Output() valueChange = new EventEmitter();
    prefix$: Observable<string>;
    suffix$: Observable<string>;
    hasFractionPart = true;
    onChange: (val: any) => void;
    onTouch: () => void;
    _inputValue: string;
    readonly precision: number;
    readonly precisionFactor: number;
    constructor(dataService: DataService, currencyService: CurrencyService)
    ngOnInit() => ;
    ngOnChanges(changes: SimpleChanges) => ;
    ngOnDestroy() => ;
    registerOnChange(fn: any) => ;
    registerOnTouched(fn: any) => ;
    setDisabledState(isDisabled: boolean) => ;
    onInput(value: string) => ;
    onFocus() => ;
    writeValue(value: any) => void;
}
  • Implements: ControlValueAccessor, OnInit, OnChanges, OnDestroy
<div className="members-wrapper">

disabled

<MemberInfo kind="property" type={``} />

readonly

<MemberInfo kind="property" type={``} />

value

<MemberInfo kind="property" type={number} />

currencyCode

<MemberInfo kind="property" type={``} />

valueChange

<MemberInfo kind="property" type={``} />

prefix$

<MemberInfo kind="property" type={Observable<string>} />

suffix$

<MemberInfo kind="property" type={Observable<string>} />

hasFractionPart

<MemberInfo kind="property" type={``} />

onChange

<MemberInfo kind="property" type={(val: any) => void} />

onTouch

<MemberInfo kind="property" type={() => void} />

_inputValue

<MemberInfo kind="property" type={string} />

precision

<MemberInfo kind="property" type={number} />

precisionFactor

<MemberInfo kind="property" type={number} />

ngOnInit

<MemberInfo kind="method" type={() => } />

ngOnChanges

<MemberInfo kind="method" type={(changes: SimpleChanges) => } />

ngOnDestroy

<MemberInfo kind="method" type={() => } />

registerOnChange

<MemberInfo kind="method" type={(fn: any) => } />

registerOnTouched

<MemberInfo kind="method" type={(fn: any) => } />

setDisabledState

<MemberInfo kind="method" type={(isDisabled: boolean) => } />

onInput

<MemberInfo kind="method" type={(value: string) => } />

onFocus

<MemberInfo kind="method" type={() => } />

writeValue

<MemberInfo kind="method" type={(value: any) => void} />

</div>