6 |
7 | ### JS version
8 | Here you can find JS based version: [getmdl-select](https://github.com/CreativeIT/getmdl-select)
9 |
10 | ## Getting started
11 | ### Step 1: Install `material-angular-select`:
12 | ##### NPM
13 | ```shell
14 | npm install --save material-angular-select
15 | ```
16 | or
17 | ##### YARN
18 | ```shell
19 | yarn add material-angular-select
20 | ```
21 | ### Step 2: Import the MaterialAngularSelectModule
22 | ```typescript
23 | import { MaterialAngularSelectModule } from 'material-angular-select';
24 |
25 | @NgModule({
26 | declarations: [
27 | AppComponent,
28 | ],
29 | imports: [
30 | BrowserModule,
31 | MaterialAngularSelectModule, // add the module in imports
32 | ],
33 | providers: [],
34 | bootstrap: [AppComponent]
35 | })
36 | export class AppModule { }
37 | ```
38 |
39 | ### Step 3 (Optional): Include MDL
40 | If you didn't use [material-design-lite](https://github.com/google/material-design-lite) in your project before, don't forget to include necessary sources.
41 | Follow steps from [here](https://getmdl.io/started/index.html)
42 | or
43 | - add dependencies in `angular.json`
44 | ```json
45 | ...
46 | "build": {
47 | "options": {
48 | "styles": [
49 | "node_modules/material-design-lite/src/material-design-lite.scss"
50 | ],
51 | "scripts": [
52 | "node_modules/material-design-lite/material.js"
53 | ]
54 | ...
55 | ```
56 | - and import icons to `index.html`
57 | ```html
58 |
59 | ```
60 |
61 |
62 | ## Sample implementation
63 |
64 | **```app.module.ts```**
65 |
66 | ```javascript
67 | import { BrowserModule } from '@angular/platform-browser';
68 | import { NgModule } from '@angular/core';
69 |
70 | import { AppComponent } from './app.component';
71 | import { MaterialAngularSelectModule } from 'angular-ratify';
72 |
73 | @NgModule({
74 | declarations: [
75 | AppComponent
76 | ],
77 | imports: [
78 | BrowserModule,
79 | MaterialAngularSelectModule,
80 | ],
81 | providers: [],
82 | bootstrap: [AppComponent]
83 | })
84 | export class AppModule { }
85 |
86 | ```
87 |
88 | **```app.component.html```**
89 |
90 | ```html
91 |