Skip to content
Angular select for material-design-lite
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
projects/material-angular-select feat: more examples Apr 17, 2019
src
.editorconfig initial commit Apr 16, 2019
.gitignore initial commit Apr 16, 2019
README.md
angular.json feat: material angular select lib Apr 16, 2019
package.json fix: readme Apr 19, 2019
tsconfig.json
tslint.json initial commit Apr 16, 2019
yarn.lock feat: material angular select lib Apr 16, 2019

README.md

material-angular-select

Angular select for material-design-lite

Live example

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 hello@creativeit.io. We will be happy to help you!

Support the project

You can’t perform that action at this time.