ng-generic-radio
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    NgGenericRadio

    Use of NgGenericRadio is to provide a way for frontend developers to simulate the behaviour of radio button.

    To use NgGenericRadio we have to use generic-radio-group component and inside it we need to provide ng-generic-radio-option with both selected and unselected state HTML.

    NgGenericRadio is fully compatible with Angular Reactive and Template drivend forms.

    Installation

    npm install --save ng-generic-radio

    For Angular 10 use version 2.0.x

    Usage

    1. Import NgGenericRadioModule in the component module where we want to use generict radio.
      import { NgGenericRadioModule } from 'ng-generic-radio';
    
      @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        BrowserModule,
        NgGenericRadioModule,
        FormsModule,
        ReactiveFormsModule,
      ],
      providers: [],
      bootstrap: [AppComponent],
    
    })
    export class AppModule { }
    
    1. Use generic-radio-group tag in html and provide ng-generic-radio-option both unselected and selcted state html insdie the ng-generic-radio-option tag. *selectedState directive is use for selected state and *unSelectedState directive is used for unselected state.
    <ng-generic-radio-group [(ngModel)]="selectedModel">
      <ng-generic-radio-option value="option-1">
        <p *selectedState>selected option 1</p>
        <p *unSelectedState>not selected option 1</p>
      </ng-generic-radio-option><br>
      <ng-generic-radio-option value="option-2">
        <p *selectedState>selected option 2</p>
        <p *unSelectedState>not selected option 2</p>
      </ng-generic-radio-option><br>
      <ng-generic-radio-option value="option-3">
        <p *selectedState>selected option 3</p>
        <p *unSelectedState>not selected option 3</p>
      </ng-generic-radio-option>
    </ng-generic-radio-group>
    

    With Reactive From :-

    <ng-generic-radio-group [formControl]="demoFormControl">
      <ng-generic-radio-option value="option-1">
        <p *selectedState>selected option 1</p>
        <p *unSelectedState>not selected option 1</p>
      </ng-generic-radio-option><br>
      <ng-generic-radio-option value="option-2">
        <p *selectedState>selected option 2</p>
        <p *unSelectedState>not selected option 2</p>
      </ng-generic-radio-option><br>
      <ng-generic-radio-option value="option-3">
        <p *selectedState>selected option 3</p>
        <p *unSelectedState>not selected option 3</p>
      </ng-generic-radio-option>
    </ng-generic-radio-group>
    

    Example

    Here is the Demo

    Please have a look on these also

    1. NgGenericToggle

    Install

    npm i ng-generic-radio

    DownloadsWeekly Downloads

    9

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    158 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar