ng-multiline-placeholder v0.1.0-alpha.2
ng-multiline-placeholder
The ng-multiline-placeholder is an Angular library that provides a component and a directive to create multiline placeholder with cross-browser support. It is based on a watermark solution suggested here.
multi-container
component must wrap the control element (input or textarea).multi-container
should be styled similarly to the control element (more about styling below). Theplaceholder
property should be bound to a string. The string can contain HTML markup (but not inline styles). If the string doesn't have any markup, all newlines are replaced by<br>
.multiFormElement
directive must be place in the control element.
Installation
To install this library, run:
npm install --save ng-multiline-placeholder
or
yarn add ng-multiline-placeholder
Consuming the library
In your Angular AppModule
(app.module.ts
):
import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
PlaceholderModule
} from 'ng-multiline-placeholder';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PlaceholderModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Basic example:
import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
template: `<multi-container [placeholder]="myPlaceholder">
<textarea multiFormElement></textarea>
</multi-container>`,
})
export class AppComponent implements OnInit {
myPlaceholder = `line 1
line 2
line 3`;
}
Styling multi-container wrapper
In general, provide the same styling to the multi-container component as the form element.
Here is an example:
textarea,
multi-container {
min-height: 100px;
width: 25%;
/* display: block !important; */
}
textarea {
border: none;
padding: 3px;
}
textarea:focus {
outline: none;
}
multi-container {
resize: both;
overflow: auto;
border: 1px solid #ccc;
/* vertical-align: text-bottom; */
}
multi-container:focus-within {
outline-color: #75adf9;
outline-style: auto;
outline-width: 5px;
outline-offset: -2px;
}
multi-placeholder {
color: #757575;
padding: 2px;
}
See a working example in Stackblitz.
It is also compatible with Angular material, see this example.
Want to help?
Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.
License
Apache 2.0 © EMBL - European Bioinformatics Institute