Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/weblineindia/angular-dropdown-component
AngularJS Dropdown is a lightweight component and includes all in one UI for selection and autocomplete.
https://github.com/weblineindia/angular-dropdown-component
angular angular-components angular-dropdown angular-dropdownlist angular-libraries angular-select angularjs angularjs-components angularjs-dropdown angularjs-library dropdown-component dropdown-component-demo reusable-components ui-select
Last synced: 4 days ago
JSON representation
AngularJS Dropdown is a lightweight component and includes all in one UI for selection and autocomplete.
- Host: GitHub
- URL: https://github.com/weblineindia/angular-dropdown-component
- Owner: weblineindia
- License: mit
- Created: 2020-07-21T07:23:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T07:54:57.000Z (over 4 years ago)
- Last Synced: 2024-04-09T12:04:21.083Z (7 months ago)
- Topics: angular, angular-components, angular-dropdown, angular-dropdownlist, angular-libraries, angular-select, angularjs, angularjs-components, angularjs-dropdown, angularjs-library, dropdown-component, dropdown-component-demo, reusable-components, ui-select
- Language: JavaScript
- Homepage: https://www.weblineindia.com/software-development-resources.html
- Size: 313 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular - Dropdown Component
An Angular-based Dropdown component for selecting options from a list.
## Table of contents
- [Browser Support](#browser-support)
- [Demo](#demo)
- [Getting started](#getting-started)
- [Usage](#usage)
- [Available Props](#available-props)
- [Methods](#methods)
- [Want to Contribute?](#want-to-contribute)
- [Collection of Components](#collection-of-components)
- [Changelog](#changelog)
- [License](#license)
- [Keywords](#Keywords)
## Browser Support
|  |  |  |  |  |
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
## Demo
[](https://github.com/weblineindia/AngularJS-Text-Box/textNg.gif)
## Getting started
Install the npm package:
```bash
npm install angular-weblineindia-dropdown
#OR
yarn add angular-weblineindia-dropdown
```
## Usage
Use the `` component:
Add in app.module.ts file
```typescript
import { NgModule } from "@angular/core";
import { AngularWeblineindiaDropdownModule } from 'angular-weblineindia-dropdown';
@NgModule({
imports: [AngularWeblineindiaDropdownModule],
})
export class AppModule {}
```
Add in app.component.ts file
```typescript
selectedOption: any;
dropdownOptions: any[] = [
{ id: '1', name: 'Option 1' },
{ id: '2', name: 'Option 2' },
{ id: '3', name: 'Option 3' },
];
onOptionSelect(option: any) {
console.log('Selected option:', option.target.value);
}
onFocusDropdown(event: any) {
console.log('Dropdown focused', event);
}
onBlurDropdown(event: any) {
console.log('Dropdown blurred', event);
}
}
```
Add in app.component.html file
```html
```
Add in app.component.css file
```typescript
::ng-deep .custom-dropdown {
/* Add your custom styles for the dropdown here */
}
::ng-deep .custom-dropdown-list {
/* Add your custom styles for the dropdown list here */
}
```
## Available Props
| Prop | Type | Default | Description |
| ----------------- | ------- | ------- | ---------------------------------------- |
| placeholder | String | | The placeholder text for the input field |
| options | Array | | Array of options for the dropdown |
| dropdownClass | String | | CSS class for the dropdown container |
| dropdownListClass | String | | CSS class for the dropdown list |
| disabled | Boolean | | Specifies if the dropdown is disabled |
| value | string | | Selected option for the dropdown |
## Methods
| Name | Description |
| ------ | ------------------------------------------------------------------ |
| focus | Gets triggered when the dropdown input field receives focus. |
| blur | Gets triggered when the dropdown input field loses focus. |
| change | Gets triggered when the selected option(s) in the dropdown change. |
## Want to Contribute?
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
- [Fork it](http://help.github.com/forking/).
- Create new branch to contribute your changes.
- Commit all your changes to your branch.
- Submit a [pull request](http://help.github.com/pull-requests/).
---
## Collection of Components
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)
---
## Changelog
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
## License
[MIT](LICENSE)
[mit]: https://github.com/weblineindia/AngularJS-Text-Box/blob/master/LICENSE
## Keywords
angular-weblineindia-dropdown, dropdown, input, angular, angular-component, dropdown-component, dropdown-box, dropdown-box-input