Clever Geek Handbook

Get selected checkbox value in * ngFor angular 2

I have json as shown below:

[
  {
    "name": "Parent",
    "submenus": [
        {
            "name":"Child1"
        },
        {
            "name":" Child2"
        },
        {
            "name":" Child3"
        },
        {
            "name":"Child4"
        },
        {
            "name":"Child5"
        }
    ]
  }
]

and the code in the html file

 <li *ngFor='let submenu of filterType.submenus'>
         <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox" [(ngModel)]="submenu.selected">
        <label for="checkbox1">
                         {{submenu.name}}
                    </label>
    </div>

      </li>

how to get only those checkboxes that have been clicked .. please help me how i hv pass the selected value to angular graphic graph.

+3


source to share


2 answers


you can create multiple temp json using submenu

   filternames = [
            {
              name: 'Child1',
              checked: false
            },
            {
              name: 'Child2',
              checked: false
            },
            {
              name: 'Child3',
              checked: false
            },
          ];

           checked() {
          return this.filternames .filter(item => { return item.checked; });
        }

Html



  <li *ngFor='let submenu of filternames'>
         <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox" 
[(ngModel)]="submenu.checked" [value]="submenu.name">
        <label for="checkbox1">
                         {{submenu.name}}
                    </label>
    </div>

      </li>


      <pre>Selected names: <span *ngFor="let filternames of checked()" ">{{ filternames.name}}</span></pre
<P → Function

checked () always returns the selected checkboxes

+1


source


Since you have bound checkboxes to your model with:

[(ngModel)]="submenu.selected"


All you have to do is traversal / iterate through filterType.submenus

and filter for those withselected===true

+1


source






More articles:


All Articles