Create simple clean tag clouds in your Angular app. No other dependencies required.
npm install angular-tag-cloudng-tag-cloud.js from src dir in the package to your project dirangular.module('yourApp',['ngTagCloud',...]'); ``sh`
$ bower install angular-tag-cloud
Then add a
`
And finally in your Angular app, add the dependency as:
angular.module('yourApp',['ngTagCloud',...]');
`sh`
$ npm install angular-tag-cloudrequire()
Then in your project source as:
`javascript`
require('angular-tag-cloud')
I have included a default css file for default styling. Include it in your file:
`html`css
You can easily override it with your custom class.
Usage
In your html file, use the component like this:
`html`css
or with your custom defined . 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``
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.