title: Angular 4 - ngModel for select and select multiple checkboxes
body: <p>In application there are 4 checkboxes. When i select one box all gets selected and when i deselct any one all gets deselcted. I want the top box to control all boxes below like if i check top box as select then all should select. if i unselect top all should get unselected. and below one's should be independent of each other. If i select all down boxes then main  top box one should also get selected.</p>
  
  <pre><code>//our root app component
  import {Component, NgModule, VERSION} from '@angular/core'
  import {FormsModule} from '@angular/forms'
  import {BrowserModule} from '@angular/platform-browser'
  
  @Component({
    selector: 'my-app',
    providers: [],
    template: `
    &lt;input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck (change)="toggleVisibility($event)"/&gt;&lt;br&gt;
    &lt;input type="checkbox"  [(ngModel)]="theCheckbox" /&gt;&lt;br&gt;
    &lt;input type="checkbox" [(ngModel)]="theCheckbox" /&gt;&lt;br&gt;
    &lt;input type="checkbox" [(ngModel)]="theCheckbox" /&gt;&lt;br&gt;
    Checkbox is &lt;span *ngIf="marked"&gt;checked&lt;/span&gt;&lt;span *ngIf="!marked"&gt;unchecked&lt;/span&gt;
  
    &lt;div&gt;And &lt;b&gt;ngModel&lt;/b&gt; also works, it's value is &lt;b&gt;{{theCheckbox}}&lt;/b&gt;&lt;/div&gt;
  
    `,
    directives: []
  })
  export class App {
    marked = false;
    theCheckbox = false;
    constructor() {
  
    }
  
    toggleVisibility(){
      this.marked= e.target.checked;
    }
  }
  
  @NgModule({
    imports: [ BrowserModule , FormsModule],
    declarations: [ App ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>