node package manager

angular-tag-cloud-module

A Tag Cloud Module For Angular (>2.X.X)

NPM version

This is a module for Angular (>=Version 2.X.X) applications. The project is based on angular-tag-cloud which provides a tag cloud for Angular 1.X.X applications.

alt text

Install

To install the module just run the following command on your CLI:

npm install --save angular-tag-cloud-module

Or if you use yarn:

yarn add angular-tag-cloud-module

Usage

  1. Import the module into your Angular-NgModule:
// app.module.ts 
import { TagCloudModule } from 'angular-tag-cloud-module';
 
@NgModule({
  imports: [
    TagCloudModule
  ]
})
export class AppModule { }
  1. Setup the cloud:
import { Component } from '@angular/core';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
 
@Component({
  selector: 'my-component',
  template: `
    <div>
      <angular-tag-cloud
        [data]="data"
        [width]="options.width"
        [height]="options.height"
        [overflow]="options.overflow">
      </angular-tag-cloud>
    </div>
  `
})
export class AppComponent {
  options: CloudOptions = {
    // if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value  
    width : 1000,
    height : 400,
    overflow: false,
  }
 
  data: Array<CloudData> = [
    {text: 'Weight-10-link-color', weight: 10, link: 'https://google.com', color: '#ffaaee'},
    {text: 'Weight-10-link', weight: 10, link: 'https://google.com'},
    // ... 
  ]
}

Check out the demo-Folder for a complete example

Example: Changing Data after initializing

If you want to change the data after initializing it (e.g. when fetching the data from a backend), you have to pass a new Array<CloudData> into the component so that it can detect the changes:

import { Component } from '@angular/core';
import { CloudData } from 'angular-tag-cloud-module';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
 
@Component({
  selector: 'my-component',
  template: `
    <angular-tag-cloud [data]="data"></angular-tag-cloud>
    <button (click)="newData()">Get new Data from Observable</button>
  `
})
export class AppComponent {
 
  data: Array<CloudData> = [
    { text: 'Initial Data weight-10', weight: 10 }
    // ... 
  ]
 
  newData(){
    const changedData$: Observable<Array<CloudData>> = Observable.of([
      { text: 'Weight-3', weight: 3 },
      // ... 
    ]);
    changedData$.subscribe(res => this.data = res);
  }
}

Example: Detect the clicked item

Angular-Tag-Cloud emits an event as soon as an item is clicked.

import { Component } from '@angular/core';
import { CloudData } from 'angular-tag-cloud-module';
 
@Component({
  selector: 'my-component',
  template: `
    <angular-tag-cloud 
      [data]="data" 
      (clicked)="logClicked($event)">
    </angular-tag-cloud>
  `
})
export class AppComponent {
 
  data: Array<CloudData> = [
    { text: 'Initial Data weight-10', weight: 10 }
    // ... 
  ]
 
  logClicked(clicked: CloudData){
    console.log(clicked);
  }
}

Using a custom Stylesheet

You can adjust the style for the component. Please read the Wiki article and follow the instructions.

Options

The HTML-selector <angular-tag-cloud> can/must have the following inputs:

Input Type default value mandatory
data Array of cloudData yes
width number (*) 500 no
height number 300 no
overflow boolean true no

(*) if the value is between 0 and 1, it will be set to the size of the upper element multiplied by the value. Setting the value > 1 it will be set the width to the appropriate value in Pixel (px).

data-Array elements can/must have the following attributes:

name Type default value mandatory
text string null
weight number 5 no
link string no
external boolean false (only has relevance if link was set) no
color valid CSS color (a shade of blue, depends on the weight) no

Also the element can have the following output:

Input Event Return Type default value mandatory Description
clicked CloudData - no Returns the clicked CloudData-Object
afterInit - - no Fires after the View was initilized
afterChecked - - no Fires after the View was checked