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). The placeholder 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