ngx-watermark

Simple watermark with multiple line of text for Angular

Table of contents

• Table of contents
• Versions
• Features
• Installation instructions
• Demo
• Options

Versions

Angular	ngx-watermark
>=13.0.0 <14.0.0	v13.x
>=12.0.0 <13.0.0	v12.x
>=11.0.0 <12.0.0	v11.x
>=10.0.0 <11.0.0	v2.x
>=6.0.0 <10.0.0	v1.x

---

Features

• Watermark Text Multiple Line
• Customize font-family with Web Safe Font
• Allow to use your own web fonts
• Load web fonts via fontfaceobserver lib

Installation instructions

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>

Demo

demo project

Options

Option	Type	Default	Required	Description
text	string	ngx-watermark	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