igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
297 lines (296 loc) • 8.06 kB
TypeScript
import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, EventEmitter, OnDestroy, QueryList } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { IgxRadioComponent } from '../../radio/radio.component';
import { IgxDirectionality } from '../../services/direction/directionality';
import { IChangeCheckboxEventArgs } from '../../checkbox/public_api';
import * as i0 from "@angular/core";
/**
* Determines the Radio Group alignment
*/
export declare const RadioGroupAlignment: {
horizontal: "horizontal";
vertical: "vertical";
};
export type RadioGroupAlignment = typeof RadioGroupAlignment[keyof typeof RadioGroupAlignment];
/**
* Radio group directive renders set of radio buttons.
*
* @igxModule IgxRadioModule
*
* @igxTheme igx-radio-theme
*
* @igxKeywords radiogroup, radio, button, input
*
* @igxGroup Data Entry & Display
*
* @remarks
* The Ignite UI Radio Group allows the user to select a single option from an available set of options that are listed side by side.
*
* @example:
* ```html
* <igx-radio-group name="radioGroup">
* <igx-radio *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}">
* {{item}}
* </igx-radio>
* </igx-radio-group>
* ```
*/
export declare class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit, ControlValueAccessor, OnDestroy, DoCheck {
ngControl: NgControl;
private _directionality;
private cdr;
/**
* Returns reference to the child radio buttons.
*
* @example
* ```typescript
* let radioButtons = this.radioGroup.radioButtons;
* ```
*/
radioButtons: QueryList<IgxRadioComponent>;
/**
* Sets/gets the `value` attribute.
*
* @example
* ```html
* <igx-radio-group [value] = "'radioButtonValue'"></igx-radio-group>
* ```
*/
get value(): any;
set value(newValue: any);
/**
* Sets/gets the `name` attribute of the radio group component. All child radio buttons inherits this name.
*
* @example
* ```html
* <igx-radio-group name = "Radio1"></igx-radio-group>
* ```
*/
get name(): string;
set name(newValue: string);
/**
* Sets/gets whether the radio group is required.
*
* @remarks
* If not set, `required` will have value `false`.
*
* @example
* ```html
* <igx-radio-group [required] = "true"></igx-radio-group>
* ```
*/
get required(): boolean;
set required(value: boolean);
/**
* Sets/gets the selected child radio button.
*
* @example
* ```typescript
* let selectedButton = this.radioGroup.selected;
* this.radioGroup.selected = selectedButton;
* ```
*/
get selected(): IgxRadioComponent | null;
set selected(selected: IgxRadioComponent | null);
/**
* Sets/gets whether the radio group is invalid.
*
* @remarks
* If not set, `invalid` will have value `false`.
*
* @example
* ```html
* <igx-radio-group [invalid] = "true"></igx-radio-group>
* ```
*/
get invalid(): boolean;
set invalid(value: boolean);
/**
* An event that is emitted after the radio group `value` is changed.
*
* @remarks
* Provides references to the selected `IgxRadioComponent` and the `value` property as event arguments.
*
* @example
* ```html
* <igx-radio-group (change)="handler($event)"></igx-radio-group>
* ```
*/
readonly change: EventEmitter<IChangeCheckboxEventArgs>;
/**
* The css class applied to the component.
*
* @hidden
* @internal
*/
cssClass: string;
/**
* Sets vertical alignment to the radio group, if `alignment` is set to `vertical`.
* By default the alignment is horizontal.
*
* @example
* ```html
* <igx-radio-group alignment="vertical"></igx-radio-group>
* ```
*/
private vertical;
protected handleClick(event: MouseEvent): void;
protected handleKeyDown(event: KeyboardEvent): void;
/**
* Returns the alignment of the `igx-radio-group`.
* ```typescript
* @ViewChild("MyRadioGroup")
* public radioGroup: IgxRadioGroupDirective;
* ngAfterViewInit(){
* let radioAlignment = this.radioGroup.alignment;
* }
* ```
*/
get alignment(): RadioGroupAlignment;
/**
* Allows you to set the radio group alignment.
* Available options are `RadioGroupAlignment.horizontal` (default) and `RadioGroupAlignment.vertical`.
* ```typescript
* public alignment = RadioGroupAlignment.vertical;
* //..
* ```
* ```html
* <igx-radio-group [alignment]="alignment"></igx-radio-group>
* ```
*/
set alignment(value: RadioGroupAlignment);
/**
* @hidden
* @internal
*/
private _onChangeCallback;
/**
* @hidden
* @internal
*/
private _name;
/**
* @hidden
* @internal
*/
private _value;
/**
* @hidden
* @internal
*/
private _selected;
/**
* @hidden
* @internal
*/
private _isInitialized;
/**
* @hidden
* @internal
*/
private _required;
/**
* @hidden
* @internal
*/
private _invalid;
/**
* @hidden
* @internal
*/
private destroy$;
/**
* @hidden
* @internal
*/
private queryChange$;
/**
* @hidden
* @internal
*/
ngAfterContentInit(): void;
/**
* @hidden
* @internal
*/
ngAfterViewInit(): void;
/**
* @hidden
* @internal
*/
private updateValidityOnBlur;
/**
* @hidden
* @internal
*/
private updateOnKeyUp;
ngDoCheck(): void;
private _updateTabIndex;
/**
* Sets the "checked" property value on the radio input element.
*
* @remarks
* Checks whether the provided value is consistent to the current radio button.
* If it is, the checked attribute will have value `true` and selected property will contain the selected `IgxRadioComponent`.
*
* @example
* ```typescript
* this.radioGroup.writeValue('radioButtonValue');
* ```
*/
writeValue(value: any): void;
/**
* Registers a function called when the control value changes.
*
* @hidden
* @internal
*/
registerOnChange(fn: (_: any) => void): void;
/**
* Registers a function called when the control is touched.
*
* @hidden
* @internal
*/
registerOnTouched(fn: () => void): void;
/**
* @hidden
* @internal
*/
ngOnDestroy(): void;
constructor(ngControl: NgControl, _directionality: IgxDirectionality, cdr: ChangeDetectorRef);
/**
* @hidden
* @internal
*/
private _initRadioButtons;
/**
* @hidden
* @internal
*/
private _selectedRadioButtonChanged;
/**
* @hidden
* @internal
*/
private _setRadioButtonNames;
/**
* @hidden
* @internal
*/
private _selectRadioButton;
/**
* @hidden
* @internal
*/
private _setRadioButtonsRequired;
/**
* @hidden
* @internal
*/
private _setRadioButtonsInvalid;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxRadioGroupDirective, [{ optional: true; self: true; }, null, null]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxRadioGroupDirective, "igx-radio-group, [igxRadioGroup]", ["igxRadioGroup"], { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "required": { "alias": "required"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, { "change": "change"; }, ["radioButtons"], never, true, never>;
static ngAcceptInputType_required: unknown;
static ngAcceptInputType_invalid: unknown;
}