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>