An Angular component wrapper for goat1000's HTML5 canvas tag cloud, compatible with Angular version 12 and upward.
- Install
ng-tagcanvas
from npm registry
If using npm:
npm install ng-tagcanvas
If using yarn:
yarn add ng-tagcanvas
- Then add
TagCanvasModule
to yourAppModule
import { TagCanvasModule } from 'ng-tagcanvas';
...
@NgModule({
...
imports: [
TagCanvasModule.forRoot()
]
})
export class AppModule {}
<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>
https://luchariman.github.io/ng-tagcanvas
-
Breaking:
TagCanvasModule
has to be loaded as a singleton by usingforRoot()
. It accepts an optionalTagCanvasOptions
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 thea
element. It also accepts aweight
input which gets applied whenoptions.weight
istrue
.