CODEWITHSUNDEEP
htmlangular
Sumit Agarwal
Sumit Agarwal

Reputation: 4306

Angular 2: CheckBox/Radio select deselect operation

I have a list of ages over which i iterate and create the list of radio inputs. Then, I select one of those and want to deselect it on a click of a button clear. How can it be achieved on angular2 using typescript.

<span *ngFor="let ageItem of ageList;">
    <input type="radio" name="age" value="{{ageItem}}"
           (click)="filter($event.target.value)">
        <span>{{ageItem}} years</span><br>
    </span>
<button md-button="" (click)="clearFilter()">Clear</button>

P.S: the list contains 100 elements, So there will be 100 checkboxes/radio inputs. Please suggest accordingly.

Upvotes: 0

Views: 2749

Answers (1)

slaesh
slaesh

Reputation: 16917

You should use ngModel for twoway-databinding.

And change-detection can be done via (ngModelChange)..

See this working demo: https://plnkr.co/edit/smMSiJnSXJQHOxW5Pi45?p=preview

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br />
      <div *ngFor="let radiobtn of options.radiobuttons">
        <h4>{{radiobtn.name}}</h4>
        <div *ngFor="let val of radiobtn.values">
          <input [name]="radiobtn.name" type="radio" [value]="val" [(ngModel)]="radiobtn.selection" (ngModelChange)="onChange()" />
          <label>{{val}} years</label>
        </div>
        <br />
        Selected: {{radiobtn.selection ? radiobtn.selection : 'none'}}
        <br />
      </div>

      <br />
      <br />

      <div *ngFor="let chkbx of options.checkboxes">
        <input type="checkbox" [(ngModel)]="chkbx.val" (ngModelChange)="onChange()" />
        <label>{{chkbx.name}}</label>
      </div>
      <br />
      <br />

      <div *ngFor="let inpt of options.inputs">
        <label>{{inpt.name}}</label>
        <input type="text" [(ngModel)]="inpt.val" (ngModelChange)="onChange()" />
      </div>

      <br />
      <br />
      <button (click)="reset()">reset!</button>
    </div>
  `,
})
export class App {

  options = {

    radiobuttons: [
      { name: 'ages1', values: [1,2,3,4,5,6,7,8,9], selection: undefined },
      { name: 'ages2', values: [65,66,68,90], selection: undefined }
    ]

    checkboxes: [
      { name: 'checkbox1', val: false },
      { name: 'checkbox2', val: false },
      { name: 'checkbox3', val: true },
      { name: 'checkbox4', val: false }
    ],

    inputs: [
      { name: 'input 1', val: '' },
      { name: 'input 2', val: 'aksjd' },
      { name: 'input 3', val: '' },
      { name: 'input 4', val: '' },
      { name: 'input 5', val: '123' }
    ]
  }

  name:string;
  constructor() {
    this.name = 'Angular2'
  }

  onChange() {
    // .. call filter(this.selectedAge)

    console.log(this.options);
  }

  reset() {
    this.options.radiobuttons.forEach(r => r.selection = false);
    this.options.checkboxes.forEach(c => c.val = false);
    this.options.inputs.forEach(i => i.val = '';

    this.onChange();
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Upvotes: 1

Related Questions