MtxRadioButton Component Overview

The MtxRadioButton component is an Angular component that encapsulates the functionality of Angular Material's radio button group. It provides a simple and effective way to create radio button groups with customizable options and behaviors.

Features

| Feature | Description | |---------------------|-----------------------------------------------------------------------------------------------| | Selection | Allows selection of a single option from a list of provided options. | | Configuration | Supports configuration options such as disabled state and layout (vertical or horizontal). | | Event Handling | Emits a selection change event when an option is clicked. | | Styling | Can be styled and customized using Angular component styling mechanisms and SCSS. |

Usage

Installation

Install the component in your Angular project:

npm install @angular/material @angular/cdk

Example

import { Component } from '@angular/core';
import { DEFAULT_MTX_RADIO_BUTTON_CONFIG, MtxRadioButtonConfig } from './radio-button';

@Component({
  selector: 'app-radio-button-example',
  template: `
    <mtx-radio-button [config]="radioButtonConfig" (selectionChange)="onSelectionChange($event)"></mtx-radio-button>
  `,
})
export class RadioButtonExampleComponent {
  radioButtonConfig: MtxRadioButtonConfig = {
    options: ['Option 1', 'Option 2', 'Option 3'],
    selectedOption: 'Option 1',
    disabled: false,
    layout: 'vertical',
  };

  onSelectionChange(option: string) {
    console.log('Selected Option:', option);
  }
}

API Summary

Inputs

| Input | Type | Description | |-------------|-----------------------|---------------------------------------------------------------| | config | MtxRadioButtonConfig | Configuration object for the radio button component. |

Outputs

| Output | Type | Description | |------------------|--------------------|---------------------------------------------------------------| | selectionChange | EventEmitter | Event emitted when an option is selected. |