A radio-button is an element that allows the user
to choose only one option from a set.
The below example is used to choose only one option
from a gender set using Angular 5 Material.
radiobutton.ts -
import
{Component} from
'@angular/core';
@Component({
selector:
'radiobutton',
templateUrl:
'radiobutton.html'
})
export
class Radiobutton{
//Todo – Radio button
}
And radiobutton.html –
<mat-card>
<mat-card-content>
<h2>Pick
Your Gender</h2>
<section
>
<mat-radio-group
[(ngModel)]="Gender">
<mat-radio-button
value="Male">Male</mat-radio-button>
<mat-radio-button
value="Female">Female</mat-radio-button>
</mat-radio-group>
</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
{Radiobutton} from
'./app/radiobutton;
@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:
[Radiobutton],
declarations:
[Radiobutton],
bootstrap:
[Radiobutton],
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..
|
