https://github.com/haithemmosbahi/angular-placeholder-auto-hide
Directive for angular 4.0+ applications that handles hiding and showing placeholder in input fields
https://github.com/haithemmosbahi/angular-placeholder-auto-hide
angular-directive angular4 directive inputs placeholder
Last synced: 4 months ago
JSON representation
Directive for angular 4.0+ applications that handles hiding and showing placeholder in input fields
- Host: GitHub
- URL: https://github.com/haithemmosbahi/angular-placeholder-auto-hide
- Owner: HaithemMosbahi
- Created: 2017-08-08T15:37:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-09T16:41:53.000Z (over 8 years ago)
- Last Synced: 2025-09-09T13:51:22.692Z (5 months ago)
- Topics: angular-directive, angular4, directive, inputs, placeholder
- Language: JavaScript
- Size: 52.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# ngx-placeholder-auto-hide
[](https://www.npmjs.com/package/ngx-placeholder-auto-hide) [](https://travis-ci.org/HaithemMosbahi/angular-placeholder-auto-hide)
Angular directive to automatically hide / show input's placeholder when focusin / focusout events are detected.
## Installation
To install ngx-placeholder-auto-hide, run:
```bash
$ npm install ngx-placeholder-auto-hide --save
```
## Demo
A live [demo](https://angular-du26zp.stackblitz.io) of the ngx-placeholder-auto-hide is hosted on stackblitz.
If you would like to play with this directive, you can use this [online editor](https://stackblitz.com/edit/angular-du26zp).
## Usage
1. Import PlaceholderAutoHideModule :
Once you have installed ngx-placeholder-auto-hide, you can import it in your `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import PlaceholderAutoHideModule
import { PlaceholderAutoHideModule } from "ngx-placeholder-auto-hide";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify PlaceholderAutoHideModule as an import
PlaceholderAutoHideModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
The PlaceholderAutoHideModule module has one directive exported which is placeholder-auto-hide. This directive can be applied on input fields and requires one argument which is the placeholder holder attribute
2. Start using it:
Once the PlaceholderAutoHideModule is imported, you can start using the placeholder-auto-hide directive in your Angular application:
```html
```
## Development
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
## License
MIT © [Haithem Mosbahi](mailto:elmosbahihaithem@gmail.com)