ng-tagcanvas
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

NgTagCanvas

An Angular component wrapper for goat1000's HTML5 canvas tag cloud, compatible with Angular version 12 and upward.

Installation

  • Install ng-tagcanvas from npm registry

If using npm:

npm install ng-tagcanvas

If using yarn:

yarn add ng-tagcanvas
  • Then add TagCanvasModule to your AppModule
import { TagCanvasModule } from 'ng-tagcanvas';
...
@NgModule({
...
  imports: [
    TagCanvasModule.forRoot()
  ]
})
export class AppModule {}

Usage example

<ng-tag-canvas [options]="{ dragControl: true, weight: true }">
  <a ngTag [weight]="40">Go</a>
  <a ngTag [weight]="99">Typescript</a>
  <a ngTag [weight]="50">Java</a>
  <a ngTag [weight]="60">Python</a>
  <a ngTag [weight]="80">Rust</a>
</ng-tag-canvas>

Demo

https://luchariman.github.io/ng-tagcanvas

Changes compared to the version 0.x:

  • Breaking: TagCanvasModule has to be loaded as a singleton by using forRoot(). It accepts an optional TagCanvasOptions for configuring global options common to all instances of TagCanvas.
  • Breaking: [tags] attribute is no longer supported by <ng-tag-canvas> component. Instead, tags are added as content of the <ng-tag-canvas> component, and such as with the native TagCanvas, they have to be an <a> element. This change allows the support of images as content.
  • Feature: The ngTag directive can be used on tag items, which disables the default click action on the a element. It also accepts a weight input which gets applied when options.weight is true.

Package Sidebar

Install

npm i ng-tagcanvas

Weekly Downloads

13

Version

1.0.2

License

MIT

Unpacked Size

127 kB

Total Files

24

Last publish

Collaborators

  • luc-hariman