# angular-mail-autocomplete

> Convert your input field to email autocomplete

Latest version **2.0.0** (published 2021-05-16) · GPL license · 0 weekly downloads

## Install

```sh
npm install angular-mail-autocomplete
pnpm add angular-mail-autocomplete
yarn add angular-mail-autocomplete
bun add angular-mail-autocomplete
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-05-16 |
| First published | 2018-08-29 |
| Weekly downloads | 0 |
| License | GPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hexad3cimal |
| Maintainers | hexad3cimal |

## Links

- npm: https://www.npmjs.com/package/angular-mail-autocomplete
- Repository: https://github.com/hexad3cimal/angular-email-autocomplete
- Homepage: https://github.com/hexad3cimal/angular-email-autocomplete#readme
- Issues: https://github.com/hexad3cimal/angular-email-autocomplete/issues
- npm.io page: https://npm.io/package/angular-mail-autocomplete

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 2.0.0 (latest) — 2021-05-16
- 0.0.5 — 2019-04-04
- 0.0.4 — 2019-04-04
- 0.0.3 — 2018-08-31
- 0.0.2 — 2018-08-31
- 0.0.1 — 2018-08-29

## README

# Angular Mail Autocomplete

Convert your input field to a drop-down with domain names appended.

## Installation

```bash
npm i angular-mail-autocomplete
```

## Options
|   Property| Description | Sample |
| ------------- | -------------  | ------------- |
| givenPlaceHolder  | Placeholder value that needs to be displayed in the input field  | Enter your value here.. |
| domainNames  | List of domain names that needs to be passed (value is mandatory but imgUrl is optional) | [{value: "gmail.com", imgUrl: 'url'},{value : "yahoo.com"}] |
| selectedValue  | Here you have to pass in the function to receive the selected value by user   | handleSelect(value: string) |


## Usage

TS

```node
export class AppComponent {

//If you want to use in a formgroup
  formControlEmail = new FormControl('', [Validators.required]);

  domains = [
    {
      value: 'gmail.com',
      imgUrl: 'https://cdn4.iconfinder.com/data/icons/free-colorful-icons/360/gmail.png'
    }, {value: 'yahoo.com'}, {value: 'msn.com'}, {value: 'outlook.com'}, {value: 'hotmail.com'}, {value: 'live.com'}
  ];

  sampleForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: this.formControlEmail
  });

//When ever user selects a value it will be available here
  handleSelect(value: string): void {
    console.log('value in parent' + value);
    this.formControlEmail.setValue(value);
  }


//For forms
  onSubmit(): void {
    console.log(this.sampleForm.value);
  }
}
```

HTML

```html
<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()">
  <autocomplete givenPlaceHolder="Sample Placeholder" [domainNames]="domains"
                (selectedValue)="handleSelect($event)"></autocomplete>
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">

  <button [disabled]="!sampleForm.valid">Submit</button>
</form>
```

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License
GPL

---
_Source: https://npm.io/package/angular-mail-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._