Angular 5 Material Checkbox Form Controls

The checkboxes allow you to select multiple options from a set.  The below example is used to select the multiple Angular versions as per your requirement.

The example for Check-box controls as following –
checkbox.ts -

import {Component} from '@angular/core';

@Component({

  selector: 'checkbox',

  templateUrl: 'checkbox.html'

})

export class Checkbox{

//Todo - checkbox

}

And checkbox.html –

<mat-card>

  <mat-card-content>

    <h2>Choose Your Angular Version</h2>

    <section>

      <mat-checkbox  [(ngModel)]="Angular2">Angular 2</mat-checkbox>

      <mat-checkbox  [(ngModel)]="Angular4">Angular 4</mat-checkbox>

      <mat-checkbox  [(ngModel)]="Angular5">Angular 5</mat-checkbox>

      <mat-checkbox  [(ngModel)]="Angular6">Angular 6</mat-checkbox>

    </section>

  </mat-card-content>

</mat-card>

And the NgModule –

import {NgModule} from '@angular/core';

import {CdkTableModule} from '@angular/cdk/table';

import {HttpClientModule} from '@angular/common/http';

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

import {HttpModule} from '@angular/http';

import {

  MatAutocompleteModule,

  MatButtonModule,

  MatButtonToggleModule,

  MatCardModule,

  MatCheckboxModule,

  MatChipsModule,

  MatDatepickerModule,

  MatDialogModule,

  MatDividerModule,

  MatExpansionModule,

  MatGridListModule,

  MatIconModule,

  MatInputModule,

  MatListModule,

  MatMenuModule,

  MatNativeDateModule,

  MatPaginatorModule,

  MatProgressBarModule,

  MatProgressSpinnerModule,

  MatRadioModule,

  MatRippleModule,

  MatSelectModule,

  MatSidenavModule,

  MatSliderModule,

  MatSlideToggleModule,

  MatSnackBarModule,

  MatSortModule,

  MatStepperModule,

  MatTableModule,

  MatTabsModule,

  MatToolbarModule,

  MatTooltipModule,

} from '@angular/material';

import {BrowserModule} from '@angular/platform-browser';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {Checkbox} from './app/checkbox';

@NgModule({

  exports: [

    CdkTableModule,

    MatAutocompleteModule,

    MatButtonModule,

    MatButtonToggleModule,

    MatCardModule,

    MatCheckboxModule,

    MatChipsModule,

    MatStepperModule,

    MatDatepickerModule,

    MatDialogModule,

    MatDividerModule,

    MatExpansionModule,

    MatGridListModule,

    MatIconModule,

    MatInputModule,

    MatListModule,

    MatMenuModule,

    MatNativeDateModule,

    MatPaginatorModule,

    MatProgressBarModule,

    MatProgressSpinnerModule,

    MatRadioModule,

    MatRippleModule,

    MatSelectModule,

    MatSidenavModule,

    MatSliderModule,

    MatSlideToggleModule,

    MatSnackBarModule,

    MatSortModule,

    MatTableModule,

    MatTabsModule,

    MatToolbarModule,

    MatTooltipModule,

  ]

})

export class MaterialModule {}

@NgModule({

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    HttpModule,

    HttpClientModule,

    MaterialModule,

    MatNativeDateModule,

    ReactiveFormsModule,

  ],

  entryComponents: [Checkbox],

  declarations: [Checkbox],

  bootstrap: [Checkbox],

  providers: []

})

export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);