Blox Material v1.0.0

Select

Directive for creating a material designed select control menu.

As for all Blox Material directives: the controls can be used with or without the angular forms package.

Accessibility

This directive will automatically apply proper accessibility attributes to the control, and its items

Select Input

Pick a Food Group
  • Bread, Cereal, Rice, and Pasta
  • Vegetables, and Fruit
  • Milk, Yogurt, and Cheese
  • Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts


Your choice:

Customization:


API

Directive: MdcSelectTextDirective

Selector: [mdcSelectText]

Directive for showing the text of the currently selected mdcSelect item. It is the responsibility of the host component to set the actual text (see examples). This makes the mdcSelect more flexible, so that e.g. the text of options can also contain markup to style parts of it differently. When no value is selected, the embedded text must be empty.

Accessibility

  • When no id is assigned, the component will generate a unique id, so that the mdcSelectAnchor and mdcList for this select can be labelled (with aria-labelledBy) appropriately.
  • The element will be made focusable and tabbable (with tabindex=0), unless disabled.
  • The aria-disabled will get a value based on the disabled property of the mdcSelect.
  • The aria-required will get a value based on the required property of the mdcSelect.
  • The role attribute will be set to button.
  • The aria-haspopup attribute will be set to listbox.
  • The aria-labelledBy attribute will list the ids of the mdcFloatinglabel and the mdcSelectText self.
  • The aria-expanded attribute will reflect whether this element is focused (the menu-surface is open).

Directive: MdcSelectAnchorDirective

Selector: [mdcSelectAnchor]

The mdcSelectAnchor should be the first child of an mdcSelect. It contains the dropdown-icon, mdcSelectText, mdcFloatingLabel, ripples, and may contain an optional mdcNotchedOutline. See the examples for the required structure of these directives.

Directive: MdcSelectMenuDirective

Selector: [mdcSelectMenu]

Directive for the options list of an mdcSelect. This directive should be the second (last) child of an mdcSelect, and should wrap an mdcList with all selection options. See the examples for the required structure of these directives.

An mdcSelectMenu element will also match with the selector of the menu surface directive, documented here: mdcMenuSurface API.

Directive: MdcSelectDirective

Selector: [mdcSelect]

Directive for a spec aligned material design 'Select Control'. This directive should contain and mdcSelectAnchor and an mdcSelectMenu. See the examples for the required structure of these directives.

If leaving the select empty should be a valid option, include an mdcListItem as first element in the list, with an ampty string as value.

Accessibility

  • This directive implements the aria practices recommendations for a listbox. Most aria-* and role attributes affect the embedded mdcSelectAnchor, and mdcList, and are explained in the documentation for these directives.
Property Description
@Output()
valueChange
EventEmitter<string | null>

emits the value of the item when the selected item changes
@Input()
value
string

The value of the selected item.
@Input()
disabled
boolean

To disable the select, set this input to a value other then false.
@Input()
required
boolean

To make the select a required input, set this input to a value other then false.

Directive: MdcFormsSelectDirective

Selector: [mdcSelect][formControlName] [mdcSelect][formControl] [mdcSelect][ngModel]

Directive for adding Angular Forms (ControlValueAccessor) behavior to an mdcSelect. Allows the use of the Angular Forms API with select inputs, e.g. binding to [(ngModel)], form validation, etc.