Instantly share code, notes, and snippets.

Embed
What would you like to do?
Select
<md-select>
<md-option value="hello">Hello</md-option>
</md-select>
<br><br>
<md-select placeholder="Month" [(ngModel)]="selectedMonth" >
<md-option *ngFor="let month of monthes" [value]="month">
{{month}}
</md-option>
</md-select>
<span style="padding-left : 10px">{{selectedMonth}}</span>
<br><br>
<md-select placeholder="State" [(ngModel)]="selectedStatus" multiple>
<md-option *ngFor="let status of statuses; let i = index" [value]="i">
{{status}}
</md-option>
</md-select>
<span style="padding-left : 10px">{{selectedStatus}}</span>
<br><br>
<md-select placeholder="Aはどれ" (onOpen)="selectOpen()" (onClose)="selectClose()" (change)="onChange($event)">
<md-option value="a1">A</md-option>
<md-option value="a2">a</md-option>
<md-option value="a3">α</md-option>
</md-select>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-select',
templateUrl: './select.component.html',
styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit {
monthes : Array<number> = []
selectedMonth : number;
statuses : Array<string> = [
'仕事', '家事', '二日酔い'
];
selectedStatus : string;
constructor() {}
ngOnInit() {
for(let month = 1; month <= 12; month++) {
this.monthes.push(month);
}
}
selectOpen() :void {
console.log('selectOpen');
}
selectClose() : void {
console.log('selectClose');
}
onChange(event) : void {
console.log('onChange');
console.dir(event);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment