Get selected checkbox value in *ngFor angular 2

Question

I have json as follow:

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

and code in 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 checkbox which are clicked..Please help me out as i hv to pass selected value to angular highchart graph.

Answer 1

you can create some temp json using your submenus

   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

>

checked() function always returns your selected checkbox values