How to Implement Word Cloud in Angular Project

Word Cloud is an SVG image composed of words from a particular text or subject, in which the size of each word indicates its frequency/importance.Word Cloud consists of Tags which are usually single words, and the importance of each tag/word is shown with font size or color.

First install angular4-word-cloud, in to your project with the following command

npm install angular4-word-cloud --save

After the above node module is installed, also install the d3 node module. it is required for the above module to work as it is based on d3 architecture.

npm install d3 --save
and to the next step, d3 also requires to include its cloud file into the index file of the angular project. so include the following js file into your index file.

<script src=""></script> 


Every node module needs an import to get it working, so import the following to your root angular file in my case app.module.ts.
Note: if you have module.ts for your component you can also import it to your components module also.  

 import {AgWordCloudModule, AgWordCloudData} from 'angular4-word-cloud';
and also include it to your @NgModule() as given below.

 imports: [AgWordCloudModule.forRoot()],
After importing the above code your app.module.ts file should look as follows.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AgWordCloudModule, AgWordCloudData} from 'angular4-word-cloud';

import { AppComponent } from './app.component';
import { CloudComponent } from './cloud/cloud.component';

declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]
export class AppModule { }
As you can see i also imported my component into the root module, ie app.module.ts file. that's it for the import part now lets get to the coding part shall we.


first open cloud.html file copy and paste the following code.

 <div AgWordCloud [wordData]="wordData" [options]="options"></div>

Now open cloud.component.ts copy and paste the below give n code.
import { Component, OnInit } from '@angular/core';

    selector: 'app-wordcloud',
    templateUrl: './wordcloud.component.html',
    styleUrls: ['./wordcloud.component.css']
export class WordcloudComponent implements OnInit {

    wordData: any = [];
    options: any = {};
    constructor() {
    this.wordData = [
        {size: 1000, text: 'GoWriter'},
        {size: 950, text: 'Angular'},
        {size: 123, text: 'JAva script'},
        {size: 321, text: 'ngServe'},
        {size: 231, text: 'Int'},
        {size: 123, text: 'CkEditor'},
        {size: 346, text: 'Ng Model'},
        {size: 107, text: 'Variable'},
        {size: 436, text: 'Class'},
        {size: 731, text: 'NgOnInit'},
        {size: 80, text: '@Input'},
        {size: 96, text: '@Output'},
        {size: 531, text: 'EventEmitter'},
        {size: 109, text: 'ChangeDetection'},
        {size: 500, text: 'Directives'},
        {size: 213, text: 'Services'},
        {size: 294, text: 'Component'},
        {size: 472, text: 'NgViewAfterInIt'},
        {size: 297, text: 'NgOnChanges'},
        {size: 456, text: 'NgBind'},
        {size: 123, text: 'NgTest'},
        {size: 376, text: 'Pipes'},
        {size: 93, text: 'Implements'},
        {size: 123, text: 'Assets'},
    this.options = {
        settings: {
        minFontSize: 10,
        maxFontSize: 100,
        margin: {
            top: 10,
            right: 10,
            bottom: 10,
            left: 10
        labels: true // false to hide hover labels

    ngOnInit() {


save the file and refresh your project to see if the word cloud is visible. if everything is perfect you word cloud should be visible to you. if you have encountered any errors or for some reasons word cloud is not working feel free to post a comment, ill respond as soon as possible.

Tips :

  •  In case any error appears, please do check imported modules(root components) and also js import in index  file.
  •   If Case if you are getting the following error " Can't bind to 'ngModel' since it isn't a known property ", Please import common module along with form module.


Founder of, Tech Enthusiast, Normal type of Person with passion toward's work.


Siva said...
This comment has been removed by the author.
Siva said...

Hi vinay nice post. it's working fine

Ferina said...

Not working in my project

Throwing error " is not a function", event all links included and modules installed

Anonymous said...

Horrible post dude,you explain nothing and also nothing works in the example. Lots of errors, lots of warnings

Unknown said...

Funciona gracias ... pero no cambia la el tamaƱo de la fuente ...

whitecollaredmajdoor said...

Everything works as expected, but hover functionality is not working for me, it do not display the label.

Code is same as yours
options = {
settings: {
minFontSize: 10,
maxFontSize: 100,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
labels: true // false to hide hover labels