The TagCloud component for Angular represents a flexible UI component that displays a collection of user-generated tags accompanying the articles, posts, or videos on your website.
npm install -g @angular/cli ng new jqwidgets-project cd jqwidgets-project
ng add jqwidgets-ngAlternatively, you can use the standard installation (Manual Setup)
jQWidgets UI for Angular is distributed as jqwidgets-ng NPM package
npm install jqwidgets-ng
@import 'jqwidgets-ng/jqwidgets/styles/jqx.base.css';
"styles": [ "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css" ]
<jqxTagCloud #tagCloud
[width]="getWidth()"
[source]="dataAdapter"
[displayMember]="'countryName'"
[valueMember]="'technologyRating'">
</jqxTagCloud>
import { Component } from '@angular/core';
import { jqxTagCloudModule, jqxTagCloudComponent } from 'jqwidgets-ng/jqxtagcloud';
@Component({
selector: 'app-root',
imports: [jqxTagCloudModule],
standalone: true,
templateUrl: './app.component.html'
})
export class AppComponent {
data: any[] = [
{ countryName: "Australia", technologyRating: 35 },
{ countryName: "United States", technologyRating: 60 },
{ countryName: "Germany", technologyRating: 55 },
{ countryName: "Brasil", technologyRating: 20 },
{ countryName: "United Kingdom", technologyRating: 50 },
{ countryName: "Japan", technologyRating: 80 }
];
getWidth(): any {
if (document.body.offsetWidth < 600) {
return '90%';
}
return 600;
}
source: any =
{
localdata: this.data,
datatype: "array",
datafields: [
{ name: 'countryName' },
{ name: 'technologyRating' }
]
};
dataAdapter: any = new jqx.dataAdapter(this.source);
}