Features

• Display and select tags cloud in angular.

Install

npm install wsuite-tag-cloud --save

Setup

step 1: imports NgTagCloudModule to app NgModule

import { CommonModule } from '@angular/common';
import { WsuiteTagCloudModule } from 'wsuite-tag-cloud';

@NgModule({
  imports: [
    CommonModule,
    WsuiteTagCloudModule
  ],
  bootstrap: [App],
  declarations: [App] 
})
class MainModule {}

step 2: add in your component html (Ex. AppComponent)

<wsuite-tag-cloud [data]="tagsData" (selectedTags)="getSelectedTags($event)" [defaultSelectedTag]="selectedTag" [selectdColor]="'#174CB6'" ></wsuite-tag-cloud>

Use

import { TagsCloudData } from 'wsuite-tag-cloud/tags-cloud-data';

@Component({...})
export class AppComponent {

  tagsData: TagsCloudData[] = [
    // {text: "Lorem", weight: 13, color: '#ed1532', link: "https://github.com/DukeLeNoir/jQCloud"},
    {text: "Lorem", weight: 13 },
    {text: "Ipsum", weight: 10.5, html: {title: "My Title", "class": "custom-class"}},
    {text: "Dolor", weight: 9.4},
    {text: "Sit", weight: 8},
    {text: "Amet", weight: 6.2},
    {text: "Consectetur", weight: 5},
    {text: "Adipiscing", weight: 5},
    {text: "Elit", weight: 5},
    {text: "Nam et", weight: 5},
    {text: "Leo", weight: 4},
    {text: "Sapien", weight: 4},
    {text: "Pellentesque", weight: 3},
    {text: "habitant", weight: 3},
    {text: "morbi", weight: 3},
    {text: "tristisque", weight: 3},
    {text: "senectus", weight: 3},
    {text: "et netus", weight: 3},
    {text: "et malesuada", weight: 3},
    {text: "fames", weight: 2},
    {text: "ac turpis", weight: 2},
    {text: "egestas", weight: 2},
    {text: "Aenean", weight: 2},
    {text: "vestibulum", weight: 2},
    {text: "elit", weight: 2},
    {text: "sit amet", weight: 2},
    {text: "metus", weight: 2},
    {text: "adipiscing", weight: 2},
    {text: "ut ultrices", weight: 2},
    {text: "justo", weight: 1},
    {text: "dictum", weight: 1},
    {text: "Ut et leo", weight: 1},
    {text: "metus", weight: 1},
    {text: "at molestie", weight: 1},
    {text: "purus", weight: 1},
    {text: "Curabitur", weight: 1},
    {text: "diam", weight: 1},
    {text: "dui", weight: 1},
    {text: "ullamcorper", weight: 1},
    {text: "id vuluptate ut", weight: 1},
    {text: "mattis", weight: 1},
    {text: "et nulla", weight: 1},
    {text: "Sed", weight: 1}
  ];

  constructor() { }

  getSelectedTags(e: Array<TagsCloudData>){
    console.log('getSelectedTags e --->', e);
  }
}