Files
Brandy Carney b5b804725f refactor(select): rename the checked attribute to selected on option
BREAKING CHANGES:

The Option component’s `checked` attribute has been renamed to
`selected` in order to select an option. This is to the follow the MDN
spec for a select option:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

If a `ngModel` is added to the Select component the value of the
`ngModel` will take precedence over the `selected` attribute.

references #7334
2016-08-03 11:38:41 -04:00

73 lines
1.4 KiB
TypeScript

import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import { isPresent, isTrueProperty } from '../../util/util';
/**
* @name Option
* @description
* `ion-option` is a child component of `ion-select`. Similar to the native option element, `ion-option` can take a value and a selected property.
*
* @demo /docs/v2/demos/item-sliding/
*/
@Directive({
selector: 'ion-option'
})
export class Option {
private _selected: any = false;
private _disabled: any = false;
private _value: any;
/**
* @input {any} Event to evaluate when option is selected
*/
@Output() ionSelect: EventEmitter<any> = new EventEmitter();
constructor(private _elementRef: ElementRef) {}
/**
* @input {boolean} Whether or not the option is already selected
*/
@Input()
get selected() {
return this._selected;
}
set selected(val) {
this._selected = isTrueProperty(val);
}
/**
* @input {any} The value of the option
*/
@Input()
get value() {
if (isPresent(this._value)) {
return this._value;
}
return this.text;
}
set value(val: any) {
this._value = val;
}
/**
* @input {boolean} Whether or not the option is disabled
*/
@Input()
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = isTrueProperty(val);
}
/**
* @private
*/
get text() {
return this._elementRef.nativeElement.textContent;
}
}