material-angular-select

Angular select for material-design-lite

Live example

JS version

Here you can find JS based version: getmdl-select

Getting started

Step 1: Install material-angular-select:

NPM

npm install --save material-angular-select

or

YARN

yarn add material-angular-select

Step 2: Import the MaterialAngularSelectModule

import { MaterialAngularSelectModule } from 'material-angular-select';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MaterialAngularSelectModule,  // add the module in imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 (Optional): Include MDL

If you didn't use material-design-lite in your project before, don't forget to include necessary sources. Follow steps from here or

• add dependencies in angular.json

...
  "build": {
    "options": {
      "styles": [
        "node_modules/material-design-lite/src/material-design-lite.scss"
      ],
      "scripts": [
        "node_modules/material-design-lite/material.js"
      ]
...

• and import icons to index.html

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Sample implementation

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MaterialAngularSelectModule } from 'angular-ratify';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialAngularSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

 <material-angular-select [data]="countries"
                   [label]="'Location'"
                   [name]="'country'"
                   [currentValue]="locationValue"
                   (selectedValue)="changeCountry($event)"></material-angular-select>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public readonly countries = ['Minsk', 'Berlin', 'Moscow', 'NYC'];
  public locationValue = 'Minsk';
  
  public changeCountry(country) {
    // do something
  }
}

API

Inputs

Input	Type	Default	Required	Description
[data]	Array []	[]	yes	Items array
name	string	''	yes	Text for name of input
label	string	''	no	Text for label
arrow	boolean	true	no	Allows to hide arrow
disabled	boolean	false	no	Allows to disable select
fixHeight	boolean	false	no	Allows to fix menu height to 280px
isFloatingLabel	boolean	true	no	Allows to fix label
[classStyle]	Array	null	no	Added own classes to dropdown element
keys	{value: string, title: string}	{value: 'value', title: 'title'}	yes	Required if use array of object with different structure
currentValue	string or {title: any, value: any}	{title: '', value: ''}	no	Set default value

Outputs

Output	Description
selectedValue	Fired on model change. Outputs whole model

Hire us

We are ready to bring value to your business. Visit our site creativeit.io or drop us a line [email protected]. We will be happy to help you!

Support the project

• Star the repo
• Create issue report or feature request
• Check our material-angular-dashboard
• Tweet about it
• Follow us on Twitter