This is a module for Angular (>=Version 2.X.X) applications. The project is based on angular-tag-cloud which provides a tag cloud for Angular 1.X.X applications.
To install the module just run the following command on your CLI:
npm install --save angular-tag-cloud-module
Or if you use yarn:
yarn add angular-tag-cloud-module
- Import the module into your Angular-NgModule:
// app.module.ts
import { TagCloudModule } from 'angular-tag-cloud-module';
@NgModule({
imports: [
TagCloudModule
]
})
export class AppModule { }- Setup the cloud:
import { Component } from '@angular/core';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
@Component({
selector: 'my-component',
template: `
<div>
<angular-tag-cloud
[data]="data"
[width]="options.width"
[height]="options.height"
[overflow]="options.overflow">
</angular-tag-cloud>
</div>
`
})
export class AppComponent {
options: CloudOptions = {
// if width is between 0 and 1 it will be set to the size of the upper element multiplied by the value
width : 1000,
height : 400,
overflow: false,
}
data: Array<CloudData> = [
{text: 'Weight-10-link-color', weight: 10, link: 'https://google.com', color: '#ffaaee'},
{text: 'Weight-10-link', weight: 10, link: 'https://google.com'},
// ...
]
}Check out the demo-Folder for a complete example
If you want to change the data after initializing it (e.g. when fetching the data from a backend), you have to pass a new Array<CloudData> into the component so that it can detect the changes:
import { Component } from '@angular/core';
import { CloudData } from 'angular-tag-cloud-module';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Component({
selector: 'my-component',
template: `
<angular-tag-cloud [data]="data"></angular-tag-cloud>
<button (click)="newData()">Get new Data from Observable</button>
`
})
export class AppComponent {
data: Array<CloudData> = [
{ text: 'Initial Data weight-10', weight: 10 }
// ...
]
newData(){
const changedData$: Observable<Array<CloudData>> = Observable.of([
{ text: 'Weight-3', weight: 3 },
// ...
]);
changedData$.subscribe(res => this.data = res);
}
}Angular-Tag-Cloud emits an event as soon as an item is clicked.
import { Component } from '@angular/core';
import { CloudData } from 'angular-tag-cloud-module';
@Component({
selector: 'my-component',
template: `
<angular-tag-cloud
[data]="data"
(clicked)="logClicked($event)">
</angular-tag-cloud>
`
})
export class AppComponent {
data: Array<CloudData> = [
{ text: 'Initial Data weight-10', weight: 10 }
// ...
]
logClicked(clicked: CloudData){
console.log(clicked);
}
}You can adjust the style for the component. Please read the Wiki article and follow the instructions.
The HTML-selector <angular-tag-cloud> can/must have the following inputs:
| Input | Type | default value | mandatory |
|---|---|---|---|
data |
Array of cloudData | yes | |
width |
number (*) | 500 | no |
height
| number | 300 | no |
overflow |
boolean | true | no |
(*) if the value is between 0 and 1, it will be set to the size of the upper element multiplied by the value. Setting the value > 1 it will be set the width to the appropriate value in Pixel (px).
data-Array elements can/must have the following attributes:
| name | Type | default value | mandatory |
|---|---|---|---|
text |
string | null | |
weight |
number | 5 | no |
link |
string | no | |
external |
boolean | false (only has relevance if link was set) | no |
color |
valid CSS color | (a shade of blue, depends on the weight) | no |
Also the element can have the following output:
| Input | Event Return Type | default value | mandatory | Description |
|---|---|---|---|---|
clicked |
CloudData |
- | no | Returns the clicked CloudData-Object |
afterInit |
- | - | no | Fires after the View was initilized |
afterChecked |
- | - | no | Fires after the View was checked |