ngx-watermark

Simple watermark with multiple line of text for Angular

Versions

Install ngx-watermark from npm:

npm install ngx-watermark fontfaceobserver --save

Add needed package to NgModule imports:

import { NgxWatermarkModule } from 'ngx-watermark';

@NgModule({
  ...
  imports: [NgxWatermarkModule,...]
  ...
})

Add ngxWatermark to your HTML element:

<section class="jumbotron" [ngxWatermark]="options">
    ...
</section>

Option	Type	Default	Required	Description
text	string	`''`	no	Your text for create watermark. Seperate line with `\n`
width	number	`300`	no	Set width for watermark.
height	number	`100`	no	Set height for watermark.
fontFamily	string	`Arial`	no	Set font-family for text. Can set your custom web fonts.
fontSize	string	`18px`	no	Set font size for text.
fontWeight	'normal' or 'bold' or 'bolder' or 'lighter' or 100 or 200 or 300 or 400 or 500 or 600 or 700 or 800 or 900	`normal`	no	Set font weight for text.
color	string	`#999999`	no	Set font color for text by HEX color.
alpha	number	`0.5`	no	Set opacity for watermark.
degree	number	`-45`	no	Set degree for watermark.
lineHeight	number	`24`	no	Set line height for text.
textAlign	'start' or 'end' or 'center' or 'left' or 'right'	`center`	no	Set text align for text.
textBaseline	'alphabetic' or 'top' or 'hanging' or 'middle' or 'ideographic' or 'bottom'	`middle`	no	Set text base line for text.
textAlign	'start' or 'end' or 'center' or 'left' or 'right'	`center`	no	Set text align for text.
backgroundRepeat	'repeat' or 'repeat-x' or 'repeat-y' or 'no-repeat' or 'space' or 'round' or 'initial'	`repeat`	no	Set background-repeat style for watermark.
backgroundPosition	string	`0% 0%`	no	Set background-position style for watermark. standard on MDN Web docs