Lista de componentes

Descripción general de los componentes Angular Radio y Radio Group

Radio Button

El componente Ignite UI for Angular botón de radio permite al usuario seleccionar una sola opción de un conjunto disponible de opciones que se enumeran una al lado de la otra.

Angular Radio & Radio Group Example

import { Component } from '@angular/core';
import { IgxRadioComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-radio-sample-1',
    styleUrls: ['./radio-sample-1.component.scss'],
    templateUrl: './radio-sample-1.component.html',
    imports: [IgxRadioComponent, FormsModule]
})
export class RadioSample1Component {
    public selected: string;
}
ts

<igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>
html

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-radio + igx-radio {
    margin-top: 16px;
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

Getting Started with Ignite UI for Angular Radio Button

Para comenzar con el componente Ignite UI for Angular botón de radio, 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 al 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],
    ...
})
export class AppModule {
    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.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-radio-group>
      <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
      <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
  public selected: any;
}
typescript

Ahora que tiene el módulo o las directivas Ignite UI for Angular botón de radio importados, puede comenzar a usar la directiva y igx-radio el igx-radio-group componente.

Using the Angular Radio Button

Los botones de radio se pueden mostrar usando el siguiente código dentro de la plantilla del componente:

<igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>
html

Label

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.

<igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>
html

Properties

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.ts
...
public colors = [{
    hex: '#f06a2f',
    name: 'Carrot'
}, {
    hex: '#ff134a',
    name: 'Watermelon'
}, {
    hex: '#7bc96f',
    name: 'Grass'
},
{
    hex: 'transparent',
    name: 'No color'
}];

public selectedColor: string = this.colors[3].hex;
typescript

<!--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.

El resultado final sería algo así:

import { Component } from '@angular/core';

import { IgxRadioComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-radio-sample-2',
    styleUrls: ['./radio-sample-2.component.scss'],
    templateUrl: './radio-sample-2.component.html',
    imports: [IgxRadioComponent, FormsModule]
})
export class RadioSample2Component {
    public colors = [{
        hex: '#f06a2f',
        name: 'Carrot'
    }, {
        hex: '#ff134a',
        name: 'Watermelon'
    }, {
        hex: '#7bc96f',
        name: 'Grass'
    },
    {
        hex: 'transparent',
        name: 'No color'
    }];

    public selectedColor: string = this.colors[3].hex;
}
ts

@for (color of colors; track color) {
  <igx-radio name="color" [value]="color.hex" [(ngModel)]="selectedColor">
    {{color.name}}
  </igx-radio>
}

<div class="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

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-radio + igx-radio {
    margin-top: 16px;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    max-width: 400px;
    height: 250px;
    padding: 16px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .24);
    transition: background-color .2s ease-out;
}


h5 {
    margin: 0 0 16px 0;
}
scss

Estilismo

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:

$custom-radio-theme: radio-theme(
  $disabled-color: lightgray,
  $empty-color: #345779,
  $fill-color: #2dabe8,
  $fill-color-hover: #2dabe8,
  $fill-hover-border-color: #2dabe8,
);
scss

El último paso es pasar el tema de radio personalizado en nuestra aplicación:

@include css-vars($custom-radio-theme);
scss

import { Component } from '@angular/core';
import { IgxRadioComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-radio-sample-1',
    styleUrls: ['./radio-styling-sample.component.scss'],
    templateUrl: './radio-styling-sample.component.html',
    imports: [IgxRadioComponent, FormsModule]
})
export class RadioStylingSampleComponent {
    public selected: string;
}
ts

<div class="radio-wrapper">
  <igx-radio [(ngModel)]="selected" value="option1">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="option2">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="option3">Sofia</igx-radio>
  <igx-radio [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
</div>
html

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$custom-radio-theme: radio-theme(
  $disabled-color: lightgray,
  $empty-color:  #345779,
  $fill-color: #2dabe8,
  $fill-color-hover: #2dabe8,
  $fill-hover-border-color: #2dabe8
);

@include css-vars($custom-radio-theme);
 scss

Radio Group

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 controlados por plantillas.

Demo

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective } from 'igniteui-angular';


@Component({
    selector: 'app-radio-group-sample',
    styleUrls: ['./radio-group-sample.component.scss'],
    templateUrl: './radio-group-sample.component.html',
    imports: [FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxRadioGroupDirective, IgxRadioComponent, IgxButtonDirective, IgxRippleDirective, IgxLabelDirective]
})
export class RadioGroupSampleComponent {
    public fruitsForm: FormGroup;
    public fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
    public newModel: FruitData;
    public model: FruitData;

    constructor(private _formBuilder: FormBuilder) {
        // Simulate getting data from external service
        this.model = {
            favFruit: this.fruits[0],
            fullName: 'John Doe'
        };

        this.createForm();
    }

    public onSubmit() {
        if (this.fruitsForm.valid) {
            // simulate new model creation and send the new data to external service
            this.newModel = {
                favFruit: this.fruitsForm.value.favoriteFruit,
                fullName: this.fruitsForm.value.fullName
            };
        } else {
            this.newModel = null;
        }
    }

    public onReset() {
        this.fruitsForm.patchValue({
            favoriteFruit: this.model.favFruit,
            fullName: this.model.fullName
        });
        this.newModel = null;
    }

    private createForm() {
        this.fruitsForm = this._formBuilder.group({
            favoriteFruit: ['', Validators.required],
            fullName: ''
        });

        this.fruitsForm.setValue({
            favoriteFruit: this.model.favFruit,
            fullName: this.model.fullName
        });
    }
}

export class FruitData {
    public fullName: string;
    public favFruit: string;
}
ts

<div class="sample-wrapper">
  <label>Choose a fruit and submit your choice:</label>
  <form [formGroup]="fruitsForm" (ngSubmit)="onSubmit()">
    <igx-input-group>
      <input igxInput name="fullName" type="text" formControlName="fullName" required />
    </igx-input-group>

    <igx-radio-group name="fruitsRadioGroup" formControlName="favoriteFruit">
      @for (fruit of fruits; track fruit) {
        <igx-radio class="radio-sample" value="{{fruit}}">
          {{fruit}}
        </igx-radio>
      }
    </igx-radio-group>
    <button igxButton="contained" igxRipple type="submit">Submit</button>
    <button igxButton="contained" igxRipple type="button" (click)="onReset()">Reset</button>
  </form>
  @if (newModel) {
    <label igxLabel>{{newModel.fullName}} favourite fruit is {{newModel.favFruit}}.</label>
  }
</div>
html

.sample-wrapper {
    margin: 16px;
}

form {
    max-width: 380px;
    margin-bottom: 16px;
}

igx-radio {
    margin: 8px;
}

.igx-button--contained {
    margin-right: 16px;
}
scss

Usage

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:

// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
typescript

Para comenzar, cree un igxRadioGroup y agregue varios componentes igxRadio.

Tenga en cuenta que, estableciendo un name propiedad para el grupo de radio es obligatorio.

<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
  <igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
    {{fruit}}
  </igx-radio>
</igx-radio-group>
html

// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];
typescript

Alignment

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.

//sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...
typescript

<!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
  <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
html

import { Component } from '@angular/core';
import { RadioGroupAlignment, IgxRadioGroupDirective, IgxRadioComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-radio-group-vertical',
    styleUrls: ['./radio-group-vertical.component.scss'],
    templateUrl: './radio-group-vertical.component.html',
    imports: [IgxRadioGroupDirective, IgxRadioComponent, FormsModule]
})
export class RadioGroupVerticalComponent {
    public alignment = RadioGroupAlignment.vertical;
    public selected: string;
}

ts

<article class="sample-column">
    <igx-radio-group [alignment]="alignment">
        <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
        <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
        <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
        <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
</article>
html

igx-radio {
    margin-bottom: 8px;
}
scss