Angular 17 Word Cloud With jQuery
Tags: angular, jquery, webdev, frontend
Published: 2024-04-14 11:52:14

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
```bash
ng new wordcloud-project --standalone=false --routing --style=scss
```

Next, install jQuery
```bash
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.
```json
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](https://www.jqueryscript.net/text/Word-Tag-Cloud-Generator-jQWCloud.html). 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. 
```json
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.
```bash
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.

```html
<!-- 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.
```typescript
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
```typescript
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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqaza4oyyjt5n50zw1wp.png)

---

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.

```html
<!-- 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. 
```typescript
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

```bash
ng serve --open
```

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnqcy285dyhbmbzjtk10.png)

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. 

---


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6p5nll57jws6kxtb9vr.png)](https://www.buymeacoffee.com/hirushafernando)

You can connect with me on [https://hirushafernando.com/](https://hirushafernando.com/)