Descripción general de los componentes Angular Radio y Radio Group
Boton de radio
El componente Ignite UI for Angular Radio Button permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Introducción a Ignite UI for Angular
Para comenzar con el componente Ignite UI for Angular Radio Button, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar el IgxRadioModule en el archivo app.module.ts.
// app.module.ts
...
import { IgxRadioModule } from'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package@NgModule({
...
imports: [..., IgxRadioModule],
...
})
exportclassAppModule{
public selected: any;
}
typescript
Alternativamente, a partir de 16.0.0, puede importar IgxRadioGroupDirective e IgxRadioComponent como dependencias independientes, o usar el token IGX_RADIO_GROUP_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
La propiedad labelPosition se puede utilizar para cambiar la posición predeterminada de la etiqueta en el componente de radio. Los usuarios pueden elegir entre before y after. Si no se especifica, la etiqueta se colocará después del botón de opción.
Mejoremos el ejemplo anterior agregando cuatro botones de opción, cada uno responsable de aplicar un color determinado como fondo. Vincularemos la propiedad backgroundColor de un elemento div a la propiedad selectedColor del componente. Notará que selectedColor también participa en una relación vinculante bidireccional a través de la directiva NgModel, por lo tanto, su valor se actualiza cada vez que el usuario selecciona un botón de opción (color) diferente.
<!--radiogroup.component.html--><igx-radio *ngFor="let color of colors"name="color" [value]="color.hex" [(ngModel)]="selectedColor">
{{color.name}}
</igx-radio><div [style.background-color]="selectedColor">...</div>html
Preste atención a que si no usa la directiva NgModel en un enlace de datos bidireccional, debe importar FormsModule y agregarlo a la lista de importaciones de NgModule.
<igx-radio *ngFor="let color of colors"name="color" [value]="color.hex" [(ngModel)]="selectedColor">
{{color.name}}
</igx-radio><divclass="box" [style.background-color]="selectedColor"><div><h5>New York City</h5>
New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is
Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural
centers.
</div></div>html
Para comenzar a diseñar los botones de opción, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el radio-theme y acepta algunos de los parámetros del tema predeterminado:
La directiva Ignite UI for Angular Radio Group proporciona un contenedor de agrupación que permite un mejor control sobre los componentes de radio secundarios y admite formularios reactivos y basados en plantillas.
import { Component } from'@angular/core';
import { FormBuilder, FormGroup, Validators } from'@angular/forms';
@Component({
selector: 'app-radio-group-sample',
styleUrls: ['./radio-group-sample.component.scss'],
templateUrl: './radio-group-sample.component.html'
})
exportclassRadioGroupSampleComponent{
public fruitsForm: FormGroup;
public fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
public newModel: FruitData;
public model: FruitData;
constructor(private _formBuilder: FormBuilder) {
// Simulate getting data from external servicethis.model = {
favFruit: this.fruits[0],
fullName: 'John Doe'
};
this.createForm();
}
publiconSubmit() {
if (this.fruitsForm.valid) {
// simulate new model creation and send the new data to external servicethis.newModel = {
favFruit: this.fruitsForm.value.favoriteFruit,
fullName: this.fruitsForm.value.fullName
};
} else {
this.newModel = null;
}
}
publiconReset() {
this.fruitsForm.patchValue({
favoriteFruit: this.model.favFruit,
fullName: this.model.fullName
});
this.newModel = null;
}
privatecreateForm() {
this.fruitsForm = this._formBuilder.group({
favoriteFruit: ['', Validators.required],
fullName: ''
});
this.fruitsForm.setValue({
favoriteFruit: this.model.favFruit,
fullName: this.model.fullName
});
}
}
exportclassFruitData{
public fullName: string;
public favFruit: string;
}
ts
<divclass="sample-wrapper"><label>Choose a fruit and submit your choice:</label><form [formGroup]="fruitsForm" (ngSubmit)="onSubmit()"><igx-input-group><inputigxInputname="fullName"type="text"formControlName="fullName"required /></igx-input-group><igx-radio-groupname="fruitsRadioGroup"formControlName="favoriteFruit"><igx-radioclass="radio-sample" *ngFor="let fruit of fruits"value="{{fruit}}">
{{fruit}}
</igx-radio></igx-radio-group><buttonigxButton="contained"igxRippletype="submit">Submit</button><buttonigxButton="contained"igxRippletype="button" (click)="onReset()">Reset</button></form><labeligxLabel *ngIf="newModel">{{newModel.fullName}} favourite fruit is {{newModel.favFruit}}.</label></div>html
La directiva de grupo de radio se exporta como NgModule, por lo tanto, todo lo que necesita hacer en su aplicación es importar IgxRadioModule en el archivo app.module.ts:
Tenga en cuenta que, estableciendo un name propiedad para el grupo de radio es obligatorio.
<!--radio-group.component.html--><igx-radio-groupname="fruitsRadioGroup"><igx-radio *ngFor="let fruit of fruits"value="{{fruit}}">
{{fruit}}
</igx-radio></igx-radio-group>html
Utilice la propiedad de entrada alignment para cambiar la orientación de los componentes igxRadio en el grupo de radio. Los usuarios pueden elegir entre horizontal y vertical. De forma predeterminada, la alineación del grupo de radio es horizontal.