Home Angular Word Cloud Directive for Angular Library

Word Cloud Directive for Angular Library

Angular webcodeflow · August 20, 2022 · Comments off

Word cloud is an Angular 4+ directive to dynamically deliver word/tag cloud for web/mobile apps. Based on the d3.js data visualization library.

angular word cloud js, angular d3 word cloud example, highcharts word cloud angular, angular d3 cloud, angular tag cloud module github

How to make use of it:

Installation:

$ npm install angular4-word-cloud --save
$ npm install d3 --save

There is a one-word cloud directive: ag-word-cloud, to use it just add this block to your HTML file:

<div AgWordCloud 
    #word_cloud_chart=ag-word-cloud 
    [wordData]="word_cloud"
     [options]="options">
    </div>

// Create Work Cloud Data Array
wordData: Array<AgWordCloudData> = [// Words];
// Word Cloud Options
options = {
    settings: {
        minFontSize: 10,
        maxFontSize: 100,
        textRotation: 0 // see below
    },
    margin: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
    },
    labels: true // false to hide hover labels
};

word cloud directive for angular, Angular4-word-cloud Plugin/Github