Angular2, toggle a checked checkbox list

Question

Is there a way to toggle a checked checkbox list in Angular2?

I have a button that when pressed and the full list is in view, it will show only the checked items in the list. When the button is pressed again, it will show the entire list.

Plunkr: http://plnkr.co/edit/jZz4XoHjYJ40bjt2eOU5?p=preview

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
       <li *ngFor="let col of data" class="form-group">
                                    <input type="checkbox" name="col" value="{{col.value}}" [(ngModel)]="col.value" (change)="addColumns(col)" />{{col.name}}
                                    </li>
  `,
})
export class App {
  name:string;
  data:any[]=[{"id":"13","name":"AAA"},{"id":"15","name":"BBB"},{"id":"20","name":"CCC"}]
  constructor() {
    this.name = 'Angular2'
  }
  get selectedcheckboxes() {
    return this.data
      .filter(opt => opt.value)  

  }

  addColumns(col){
    this.selectedcheckboxes;
    console.log(this.selectedcheckboxes)
  }
}

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

HTML:

<body>
    <my-app>
    loading...
  </my-app>
  <button class="check">Collapse/Expand</button>
  </body>

In Angular1, it looks like this: http://jsfiddle.net/jzhang172/of4yy8k9/ I'm looking to do the same thing in Angular2, but can't understand the syntax.

you mean to say. when button is pressed, you want to unchecked all the checked checkbox — Hardik Gondalia
– Hardik Gondalia, Commented Aug 24, 2017 at 5:51
@UbiquitousDevelopers No, when I press the button, it will show the list of only checked boxes, when I press the button again, it will re-show the entire list of checked boxes (both checked and unchecked) — Snorlax
– Snorlax, Commented Aug 24, 2017 at 5:52
Yes, but hopefully there's an easy way to toggle back and forth because in Angular 1, it's pretty simple: jsfiddle.net/jzhang172/of4yy8k9 — Snorlax
– Snorlax, Commented Aug 24, 2017 at 5:55

Fetrarij · Accepted Answer · 2017-08-24 06:04:56Z

1

You can put the main array in other variable and then just change the data variable according your clicked button (to expand or to collapse), you may need one variable to define if it's full list or the selected list

something like:

isFullList: boolean;
mainData: Array<any> = [your main data here];
data: Array<any> = [data to use in list]; //should initied by mandata
toggle() {
    //this.isFullList: boolean

    if (!this.isFullList) {
      this.data = [...this.mainData];
    } else {
      this.data = [...this.selectedcheckboxes];
    }
    console.log(this.data)
    this.isFullList = ! this.isFullList
}

plunker: http://plnkr.co/edit/V1iiX87gYVMUtIkmpMfT?p=preview

answered Aug 24, 2017 at 6:04

Fetrarij

7,3463 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pengyy · Accepted Answer · 2017-08-24 06:04:19Z

0

You can implement an filter at your component, and invoke the filter at your template.

In the filter, just add a flag to control to filter or show original list, and toggle the flag by click the button.

Invoke filter at template

*ngFor="let col of getData()"

Filter data in component

getData() {
  return this.filter ? this.data.filter(item => item.value === true) : this.data;
}

Plunker Demo

answered Aug 24, 2017 at 6:04

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Collectives™ on Stack Overflow

Angular2, toggle a checked checkbox list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related