{"id":18675813,"url":"https://github.com/creativeit/material-angular-select","last_synced_at":"2025-04-12T02:11:39.425Z","repository":{"id":34741532,"uuid":"181693558","full_name":"CreativeIT/material-angular-select","owner":"CreativeIT","description":"Angular select for material-design-lite","archived":false,"fork":false,"pushed_at":"2023-01-07T06:35:58.000Z","size":8402,"stargazers_count":21,"open_issues_count":32,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T02:11:36.042Z","etag":null,"topics":["angular","mdl","sass","select","typescript"],"latest_commit_sha":null,"homepage":"https://creativeit.github.io/material-angular-select/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CreativeIT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-16T13:21:19.000Z","updated_at":"2022-09-09T16:44:16.000Z","dependencies_parsed_at":"2023-01-15T09:00:40.779Z","dependency_job_id":null,"html_url":"https://github.com/CreativeIT/material-angular-select","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fmaterial-angular-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fmaterial-angular-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fmaterial-angular-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CreativeIT%2Fmaterial-angular-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CreativeIT","download_url":"https://codeload.github.com/CreativeIT/material-angular-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505928,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","mdl","sass","select","typescript"],"created_at":"2024-11-07T09:26:29.503Z","updated_at":"2025-04-12T02:11:39.397Z","avatar_url":"https://github.com/CreativeIT.png","language":"TypeScript","readme":"# material-angular-select\nAngular select for [material-design-lite](https://github.com/google/material-design-lite)\n\n## Live example\n\u003ca target=\"_blank\" href=\"https://creativeit.github.io/material-angular-select/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CreativeIT/material-angular-select/master/src/assets/life_example.gif\" alt=\"Live example\"\u003e \u003c/a\u003e\n\n### JS version\nHere you can find JS based version: [getmdl-select](https://github.com/CreativeIT/getmdl-select) \n\n## Getting started\n### Step 1: Install `material-angular-select`:\n##### NPM\n```shell\nnpm install --save material-angular-select\n```\nor\n##### YARN\n```shell\nyarn add material-angular-select\n```\n### Step 2: Import the MaterialAngularSelectModule\n```typescript\nimport { MaterialAngularSelectModule } from 'material-angular-select';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    MaterialAngularSelectModule,  // add the module in imports\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Step 3 (Optional): Include MDL\nIf 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.\nFollow steps from [here](https://getmdl.io/started/index.html)\nor\n- add dependencies in `angular.json`\n```json\n...\n  \"build\": {\n    \"options\": {\n      \"styles\": [\n        \"node_modules/material-design-lite/src/material-design-lite.scss\"\n      ],\n      \"scripts\": [\n        \"node_modules/material-design-lite/material.js\"\n      ]\n...\n```\n- and import icons to `index.html`\n```html\n  \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\u003e\n```\n\n\n## Sample implementation\n\n**```app.module.ts```**\n\n```javascript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { MaterialAngularSelectModule } from 'angular-ratify';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    MaterialAngularSelectModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n**```app.component.html```**\n\n```html\n \u003cmaterial-angular-select [data]=\"countries\"\n                   [label]=\"'Location'\"\n                   [name]=\"'country'\"\n                   [currentValue]=\"locationValue\"\n                   (selectedValue)=\"changeCountry($event)\"\u003e\u003c/material-angular-select\u003e\n```\n\n**```app.component.ts```**\n\n```javascript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n\n  public readonly countries = ['Minsk', 'Berlin', 'Moscow', 'NYC'];\n  public locationValue = 'Minsk';\n  \n  public changeCountry(country) {\n    // do something\n  }\n}\n\n```\n\n## API\n\n### Inputs\n| Input  | Type | Default | Required | Description |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| [data] | Array\u003cany\u003e\t[] | [] |\tyes |\tItems array |\n| name | string | '' | yes | Text for name of input |\n| label | string | '' | no | Text for label |\n| arrow | boolean | true | no | Allows to hide arrow |\n| disabled | boolean | false | no | Allows to disable select |\n| fixHeight | boolean | false | no | Allows to fix menu height to 280px |\n| isFloatingLabel | boolean | true | no | Allows to fix label |\n| [classStyle] | Array\u003cstring\u003e | null | no | Added own classes to dropdown element  |\n| keys | {value: string, title: string} | {value: 'value', title: 'title'} | yes | Required if use array of object with different structure |\n| currentValue | string or {title: any, value: any} | {title: '', value: ''} | no | Set default value |\n\n### Outputs\n| Output | Description |\n| ------ | ------ |\n| selectedValue | Fired on model change. Outputs whole model |\n\n\n\n## Hire us\nWe are ready to bring value to your business. Visit our site [creativeit.io](http://creativeit.io/) or drop us a line \u003chello@creativeit.io\u003e. We will be happy to help you!\n\n## Support the project\n* Star the repo\n* Create issue report or feature request\n* Check our [material-angular-dashboard](https://github.com/CreativeIT/material-angular-dashboard)\n* [Tweet about it](https://twitter.com/CreativeITeam)\n* Follow us on [Twitter](https://twitter.com/CreativeITeam)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeit%2Fmaterial-angular-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcreativeit%2Fmaterial-angular-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcreativeit%2Fmaterial-angular-select/lists"}