Angular 17 Word Cloud With jQuery

Hello developers, in this article I will tell you how to create a word cloud or word tag cloud component for angular using jQuery scripts. Let's start.

In this project, I will use

• Angular 17

• jQuery 3.2.1

---

First, create an Angular project

ng new wordcloud-project --standalone=false --routing --style=scss

Next, install jQuery

cd wordcloud-project
npm i @types/jquery@3.2.1 jquery@3.2.1 

After installing, add the jQuery file path to the angular.json file's scripts section to make jQuery global.

scripts: [
    ...
    "node_modules/jquery/dist/jquery.slim.min.js"
]

We use a jQuery script to create the word cloud. Download the jQuery script from this link. This script is not created by me. Credit goes to its developer. Extract the downloaded zip file. The folder looks like this.

├── Word-Tag-Cloud-Generator-jQWCloud
│   ├── index.html
│   ├── README.md
│   └── Plugin
│   │   ├── jQWCloudv3.4.1.js   // We need this script
│   └── Word Cloud
│       ├── js
│           └── index.js

Copy the jQWCloudv3.4.1.js file in the Plugin folder and paste it into the angular projects src > assets > js folder. You have to create the js folder manually.

Now we have to add this script path to the angular.json file's scripts section.

scripts: [
    ...
    "node_modules/jquery/dist/jquery.slim.min.js",
    "src/assets/js/jQWCloudv3.4.1.js"
]

After setting script paths, let's create a component.

ng g c word-cloud

After creating the component, open the word-cloud.component.html file and put this code. Our word cloud will be displayed in this div tag.

<!-- word-cloud.component.html -->
<div style="width: 400px; height: 500px; margin: 100px;">
  <div id="wordCloud"></div>
</div>

Now let's convert this div tag into word cloud. Goto word-cloud.component.ts. It looks like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-word-cloud',
  templateUrl: './word-cloud.component.html',
  styleUrl: './word-cloud.component.scss'
})
export class WordCloudComponent {

}

Remove that code and put this code into the typescript file

import { Component, Input, OnInit } from '@angular/core';

declare var $: any;

// Create the interface
interface Word {
  word: string;
  weight: number;
  color?: string;
}

@Component({
  selector: 'app-word-cloud',
  templateUrl: './word-cloud.component.html',
  styleUrl: './word-cloud.component.scss'
})
export class WordCloudComponent implements OnInit {
  @Input() title!: string;
  @Input("words") wordList!: Word[];

  ngOnInit() {

    // Initialize the word cloud
    $("#wordCloud").jQWCloud({
      words: this.wordList,
      maxFont: 50,
      minFont:10,
      padding_left: null,

      // What to do when clicking on a word
      word_click :function(event: any){
        console.log(event.target.textContent);
      },

      // What to do when the cursor is on a word
      word_mouseOver :function(){},

      // What to do when the cursor is coming to a word
      word_mouseEnter :function(){},

      // What to do when the cursor is leaving a word
      word_mouseOut :function(){}
    });

  }
}

You can customize your word cloud using options like this. This is the list of options and callbacks available

---

Now let's use this component. In the app.component.html file, use the selector of our component. And we have given a title and wordlist to display in the word cloud.

<!-- app.component.html -->
<app-word-cloud title="My Word Cloud" [words]="wordlist"></app-word-cloud>

In the above code, we have used a variable called wordlist. But we haven't created it yet. Now let's create our wordlist. Go to the app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'wordcloud-project';
  wordlist = [
    {word: 'Prashant', weight: 40, color: 'green'},
    {word: 'Sandeep', weight: 39, color: 'green'},
    {word: 'Ajinkya', weight: 11, color: 'green'},
    {word: 'Kuldeep', weight: 36, color: 'green'},
    {word: 'Vivek', weight: 39},
    {word: 'Saheer', weight: 12, color: 'green'},
    {word: 'Lohit', weight: 27},
    {word: 'Anirudh', weight: 36},
    {word: 'Raj', weight: 22},
    {word: 'Mohan', weight: 40},
    {word: 'Yadav', weight: 39},
    {word: 'India', weight: 11, color: 'green'},
    {word: 'USA', weight: 27},
    {word: 'Sreekar', weight: 36},
    {word: 'Ram', weight: 39},
    {word: 'Deepali', weight: 12, color: 'green'},
    {word: 'Kunal', weight: 27},
    {word: 'Rishi', weight: 80},
    {word: 'Chintan', weight: 22}
  ]
}

You can change the color and the size of the word by changing values. If you do not give a color, it will pick a random color. Now let's run our application

ng serve --open

When the browser opens, you can see a word cloud like this.

You can customize the word cloud by changing its attributes and CSS. Enjoy with your word cloud. Happy Coding.

If this article is useful to you, don't forget to give a like.

---

You can connect with me on https://hirushafernando.com/