ng-rough-notation

〽️ A simple and configurable directive to annotate elements.

This is an Angular 13 wrapper for rough-notation.

• 😌 Easy to use
• 🪶 Lightweight
• 🎨 Customizable : colors, duration, delay, padding...
• ⚙️ Convenient : local & global config

Demo

Demo page

StackBlitz sandbox

Installation

npm install ng-rough-notation

Add RoughNotationModule to your module imports :

import { RoughNotationModule } from 'ng-rough-notation';

@NgModule({
    ...
    imports: [RoughNotationModule],
})
export class AppModule {}

Usage

Use the roughNotation directive on any element :

<span roughNotation>Some content</span>

By default, highlight will be used.

Config object

You can provide a configuration object to the directive.

<span [roughNotation]="{ type: 'highlight', color: '#F44336' }"></span>

The config object should represent a partial RoughAnnotationConfigBase interface.

Every property is optional since a default config is predefined.

Property	Type	Default value
type	'underline', 'box', 'circle', 'highlight', 'strike-through', 'crossed-off', 'bracket'	'highlight'
animate	boolean	true
animationDuration	number	800
animationDelay	number	0
color	string	See Automatic colors
strokeWidth	number	1
padding	number, [number, number], [number, number, number, number]	5
multiline	boolean	false
iterations	number	2
brackets	'left', 'right', 'top', 'bottom', [...'left', 'right', 'top', 'bottom']	'right'

Please refer to the official doc for property descriptions.

Inputs

Name	Type	Default value	Description
show	boolean	true	Sets the visibility of the annotation.
annotatedTextColor	boolean	true	Specify the CSS color value the element should have only when it is annotated. Returns to its original color when the annotation is hidden.

Outputs

Name	Type	Description
isShowingChange	EventEmitter<boolean>	Triggers each time the annotation visibility changes

Instance

You can get a reference to the RoughNotationDirective instance.

<span roughNotation #instance="roughNotation"></span>

This is useful if you want to toggle programmatically the annotation.

Method	Description
toggle()	Shows or hide the annotation according to its current state

Automatic colors

A set of default colors is defined for each annotation type. It follows the scheme on the original website so you can omit the color property if you're happy with the defaults.

Type	Default color
highlight	#FFF176
circle	#0D47A1
box	#4A148C
strike-through	#1B5E1F
underline	#B71C1B
crossed-off	#F57F17
bracket	#FF0000

Global configuration

You can provide a global default configuration for the whole module.

For that you can use the forRoot() method on the module.

RoughNotationModule.forRoot({
    type: 'circle',
    animationDuration: 1000,
})

Note: this global configuration will be overriden by the configurations provided to the roughNotation directives.

Annotation group

You can use the rough-notation-group component to wrap and toggle a bunch of annotations.

<rough-notation-group [show]="showGroup">
   <div>
      <span roughNotation>First annotation</span>
   </div>
   <div>
      <span [roughNotation]="{ type: 'underline' }">Second annotation</span>
   </div>
</rough-notation-group>