ng-rough-notation v1.2.4
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-notationAdd 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>