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 -
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);
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
