Visão geral dos componentes de rádio Angular e grupo de rádio

Radio Button

O componente Ignite UI for Angular Radio Button permite que o usuário selecione uma única opção de um conjunto de opções disponíveis listadas lado a lado.

Angular Radio & Radio Group Example

Getting Started with Ignite UI for Angular Radio Button

Para começar a usar o componente Ignite UI for Angular Radio Button, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxRadioModule no arquivo 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;
}

Como alternativa, a partir da 16.0.0, você pode importar IgxRadioGroupDirective e IgxRadioComponent como dependências autônomas ou usar o token IGX_RADIO_GROUP_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// 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;
}

Agora que você importou o módulo Ignite UI for Angular Radio Button ou as diretivas, você pode começar a usar a diretiva igx-radio-group e o componente igx-radio.

Using the Angular Radio Button

Botões de opção podem ser exibidos usando o seguinte código dentro do modelo do componente:

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

Label

A propriedade labelPosition pode ser usada para alterar a posição padrão do rótulo no componente de rádio. Os usuários podem escolher entre before e after. Se não for especificado, o rótulo será colocado após o botão de rádio.

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

Properties

Vamos aprimorar o exemplo anterior adicionando quatro botões de opção, cada um responsável por aplicar uma determinada cor como plano de fundo. Vamos vincular a propriedade backgroundColor de um elemento div à propriedade selectedColor do componente. Você notará que selectedColor também participa de uma relação de vinculação bidirecional por meio da diretiva NgModel, portanto, seu valor é atualizado cada vez que o usuário seleciona um botão de opção diferente (cor).

// 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;

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

Preste atenção que se você não usar a diretiva NgModel em uma vinculação de dados bidirecional, você deve importar o FormsModule e adicioná-lo à lista de importações do NgModule.

O resultado final seria algo assim:

Estilização

Para começar a estilizar os botões de opção, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende o radio-theme e aceita alguns dos parâmetros do tema padrão:

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

O último passo é passar o tema de rádio personalizado em nossa aplicação:

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

Radio Group

A diretiva Ignite UI for Angular Radio Group fornece um contêiner de agrupamento que permite melhor controle sobre os componentes de rádio filho e oferece suporte a formulários reativos e baseados em modelos.

Demo

Usage

A Diretiva de Grupo de Rádio é exportada como um NgModule, portanto, tudo o que você precisa fazer em seu aplicativo é importar o IgxRadioModule no arquivo app.module.ts:

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

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

Para começar, crie um igxRadioGroup e adicione vários componentes igxRadio.

Note que, ao definir um name propriedade para o grupo de rádio é obrigatório.

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

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

Alignment

Use a propriedade de entrada de alignment para alterar a orientação dos componentes igxRadio no grupo de rádio. Os usuários podem escolher entre horizontal e vertical. Por padrão, o alinhamento do grupo de rádio é horizontal.

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

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