enum TagCloudAlterTextCase {
     none,
     allLower,
     allUpper,
     firstUpper,
     titleCase
}

Sets or gets the alterTextCase property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [alterTextCase]="'titleCase'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [disabled]="true">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the displayLimit property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [displayLimit]="3">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the displayMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the displayValue property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [displayValue]="true">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

enum TagCloudFontSizeUnit {
     px,
     em,
     %
}

Sets or gets the fontSizeUnit property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [fontSizeUnit]="'em'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [height]="50">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the maxColor property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [maxColor]="'darkgreen'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the maxFontSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [maxFontSize]="5">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the maxValueToDisplay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [maxValueToDisplay]="50">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the minColor property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [minColor]="'lime'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the minFontSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [minFontSize]="1">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the minValueToDisplay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [minValueToDisplay]="30">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [rtl]="true">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

enum TagCloudSortBy {
     none,
     label,
     value
}

Sets or gets the sortBy property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [sortBy]="'label'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

enum TagCloudSortOrder {
     ascending,
     descending
}

Sets or gets the sortOrder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [sortOrder]="'descending'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

interface TagCloudSource {
     url?: String;
     data?: Any;
     localdata?: String;
     datatype?: TagCloudDataType;
     type?: String;
     id?: String;
     root?: String;
     record?: String;
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the tagRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [tagRenderer]="tagRenderer">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the takeTopWeightedItems property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [takeTopWeightedItems]="true">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the textColor property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [textColor]="'red'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the urlBase property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [urlBase]="'http://jqwidgets.com/'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the urlMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'" [urlMember]="'tagHref'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the valueMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

This event is triggered when the widget has completed binding to a dataAdapter.

Code examples

Bind to the bindingComplete event of jqxTagCloud.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud(onBindingComplete)="BindingComplete($event)"
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent {
    BindingComplete(event: any): void 
    {
        // Do Something
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

							

						

This event is triggered when a tag element is clicked. Event Arguments:

• label - item's label.
• value - item's value.
• url - item's url.
• visibleIndex - item's visible index.
• index - item's index.
• originalEvent - the Click event object.
• target - item's html element.

Code examples

Bind to the itemClick event of jqxTagCloud.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud(onItemClick)="ItemClick($event)"
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent {
    ItemClick(event: any): void 
    {
        // Do Something
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.destroy();
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myTagCloud.findTagIndex('USA');
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myTagCloud.getHiddenTagsList();
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myTagCloud.getRenderedTags();
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myTagCloud.getTagsList();
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.hideItem(1);
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.insertAt(1,'USA');
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.removeAt(1);
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.updateAt(1,'USA');
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTagCloud #myTagCloud
             [width]="600" [source]="dataAdapter" [displayMember]="'countryName'"
             [valueMember]="'technologyRating'">
        </jqxTagCloud>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTagCloud') myTagCloud: jqxTagCloudComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTagCloud.showItem(1);
    }

    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 }
    ];
     
    source: any =
    {
        localdata: this.data,
        datatype: "array",
        datafields: [
            { name: 'countryName' },
            { name: 'technologyRating' }
        ]
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);    
}