Instantly share code, notes, and snippets.

Embed
What would you like to do?
RadioButton
<md-radio-group>
<md-radio-button value="1">Option 1</md-radio-button>
<md-radio-button value="2">Option 2</md-radio-button>
</md-radio-group>
<br>
<br>
<md-radio-group >
<md-radio-button checked="true" value="1">Checked True</md-radio-button>
<md-radio-button value="2">Checked False</md-radio-button>
</md-radio-group>
<br>
<br>
<md-radio-group >
<md-radio-button align="start" value="1">Align Start</md-radio-button>
<md-radio-button align="end" value="2">Align End</md-radio-button>
</md-radio-group>
<br>
<br>
<md-radio-group>
<md-radio-button disabled="true" value="1">Disabled True</md-radio-button>
<md-radio-button disabled="false" value="2">Disabled False</md-radio-button>
</md-radio-group>
<br>
<br>
<md-checkbox [(ngModel)]="radioState">非活性</md-checkbox>
<md-radio-group [disabled]="radioState" (change)="onChangeRadioGroup()">
<md-radio-button *ngFor="let button of group" [checked]="selectedRadioButton == button.value" [value]="button.value" (change)="onChangeRadio(button.value)">{{button.name}}</md-radio-button>
</md-radio-group>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-radio-button',
templateUrl: './radio-button.component.html',
styleUrls: ['./radio-button.component.css']
})
export class RadioButtonComponent implements OnInit {
radioState = true;
group = [
{'name': '東京', 'value': 'tokyo'},
{'name': '大阪', 'value': 'osaka'}
];
selectedRadioButton = this.group[0].value;
ngOnInit() {}
onChangeRadio(value) : void {
this.selectedRadioButton = value;
console.log(this.selectedRadioButton);
}
onChangeRadioGroup() : void {
console.log('onChangeRadioGroup')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment