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

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>

jornetsimon/ng-rough-notation