Radio

Selection within a group.

Usage

Assemble the radio directives in your template.

<div ngpRadioGroup [(ngpRadioGroupValue)]="value">
  <button ngpRadioItem ngpRadioItem="Option 1">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 1
  </button>

  <button ngpRadioItem ngpRadioItem="Option 2">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 2
  </button>

  <button ngpRadioItem ngpRadioItem="Option 3">
    <ng-icon ngpRadioIndicator name="dot" />
    Option 3
  </button>
</div>

API Reference

The following directives are available to import from the @ng-primitives/ng-primitives/radio package:

NgpRadioGroupDirective

ngpRadioGroupValue

string | undefined

Define the selected value.

ngpRadioGroupDisabled

boolean

default:

"false"

Define the disabled state.

ngpRadioGroupOrientation

'vertical' | 'horizontal'

default:

"horizontal"

Define the orientation.

ngpRadioGroupValueChange

boolean

Event emitted when the selection changes.

NgpRadioItemDirective

ngpRadioItemValue

string

required

Define the value of this item.

ngpRadioItemDisabled

boolean

default:

"false"

Define the disabled state.

NgpRadioIndicatorDirective

There are no inputs or outputs for this directive.

Schematics

You can use our schematic to generate a new checkbox component.

Angular CLI

ng generate @ng-primitives/ng-primitives:radio

Options

name

string

The name of the component.

project

string

The name of the project to add the component to.

path

string

The path to create the component.