angular-tag-cloud

Create simple and clean tag clouds in angular with this library. This library is jQuery-less, for-angular port of Lucaong's jQCloud library.

Installation

General

• Copy/move ng-tag-cloud.js from src dir in the package to your project dir

• In your Angular app, add a dependency to your module as below:

  angular.module('yourApp',['ngTagCloud',...]');

bower

In your project dir, type the following command:

$ bower install angular-tag-cloud

Then add a <script> in your project html:

<script src='/bower_components/angular-tag-cloud/src/ng-tag-cloud.js'></script>

And finally in your Angular app, add the dependency as:

angular.module('yourApp',['ngTagCloud',...]');

npm

In your project dir, run the following command:

$ npm install angular-tag-cloud

Then require() in your project source as:

require('angular-tag-cloud')

Styling

I have included a default css file for default styling. Include it in your file:

<link rel="stylesheet" href="[bower_components | node_modules]/angular-tag-cloud/src/css/ng-tag-cloud.css">

You can easily override it with your custom css class.

Usage

In your html file, use the component like this:

<ng-tag-cloud cloud-width="250" cloud-height="250" cloud-data="data"></ng-tag-cloud> <!-- default height and width is 300px -->

or with your custom defined css. Please check code example to see how to implement custom css.

<ng-tag-cloud class="custom-css-class" cloud-width="250" cloud-height="250" cloud-data="data"></ng-tag-cloud>

You can also pass the font-sizes to make sure that the words not overlapping:

<ng-tag-cloud weights="[ '100%' , '120%' , '160%' , '180%' ]"></ng-tag-cloud> 

you can use 'px' or 'rem' as well.

where your data is of JSON format as shown below. In your controller:

$scope.data = [
          {text: "Lorem", weight: 15, link: "https://google.com"}, //if your tag has a link.
          {text: "Ipsum", weight: 9},
          {text: "Dolor", weight: 6},
          {text: "Sit", weight: 7},
          {text: "Amet", weight: 5}
          // ...as many words as you want
      ];

You can control whether there will be delay in word drawing like this:

<ng-tag-cloud  cloud-width="250" cloud-height="250" delayed-mode="false"></ng-tag-cloud>

• True - 10 ms delay.
• False - No delay.
• Undefined - True only if there is more then 50 words.

You can pass function that will invoke after word cloud is rendered:

<ng-tag-cloud  on-rendered="ctrl.myFunc()"></ng-tag-cloud>

Examples

Please check the examples directory to get the exact idea of what i am talking about. It's always better to check examples.

Check code example here.