Angular Material Design Lite - Select Component


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
56228Jun 15, 2021Jun 6, 2016Minified + gzip package size for @angular-mdl/select in KB




npm i --save @angular-mdl/popover @angular-mdl/select

import { MdlSelectModule } from '@angular-mdl/select';

If you need to support IE11 please add https://www.npmjs.com/package/custom-event-polyfill to your polyfills.

Usage example

<mdl-select [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>

using placeholder

<mdl-select placeholder="Person Name" [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>

using label with floating label

<mdl-select label="{{personLabel}}" floating-label [(ngModel)]="personId">
    <mdl-option *ngFor="let p of people" [value]="p.id">{{p.name}}</mdl-option>

API Summary


Name Type Description
[ngModel] any Select data binding
[disabled] boolean Whether or not the select is disabled
[placeholder] string Placeholder text
[label] string Label text
[floating-label] any If present or true the label will be floating on focus event
[multiple] boolean Multiselect mode
[autocomplete] boolean Autocomplete mode
(blur) ... on blur event
(change) ... on change event


Name Type Description
[value] any Option value
[disabled] boolean Whether or not the option is disabled
<content> string Option label

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.