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

$3

- 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',...]');

$3

In your project dir, type the following command:

``sh
$ bower install angular-tag-cloud
`
Then add a
`
And finally in your Angular app, add the dependency as:

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




$3

In your project dir, run the following command:

`sh
$ npm install angular-tag-cloud
`
Then require() in your project source as:

`javascript
require('angular-tag-cloud')
`

$3

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

`html

`
You can easily override it with your custom css class.



Usage

In your html file, use the component like this:

`html

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

`html

`

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

`html

`

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

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

`javascript
$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:
`html

`
- 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:
`html

``

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.