material-angular-select v1.0.0

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

Outputs

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

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