ejTagCloud

3 Aug 201824 minutes to read

The TagCloud allows the user to display a list of links or tags with a structured cloud format where the importance of the tags can differentiate with varied font sizes, colors, and styles.

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

Requires

module:jQuery
module:ej.core.js
module:ej.data.js
module:ej.tagcloud.js

Members

cssClass `string`

Specify the CSS class to button to achieve custom theme.

Default Value

””

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" cssClass="cssClass"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

The css must be placed in stylesheet.

<style>
.cssClass{
    font-family: cursive;
}
</style>

dataSource `object`

The dataSource contains the list of data to display in a cloud format. Each data contains a link URL, frequency to categorize the font size and a display text.

Default Value

null

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

enableRTL `boolean`

Sets the TagCloud and tag items direction as right to left alignment.

Default Value

false

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" [enableRTL]=true></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

fields `object`

Defines the mapping fields for the data items of the TagCloud.

Default Value

null

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" [fields]="fields" [enableRTL]=true></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    fields: Object;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
        this.fields= { text: "text" , url:"url",frequency: "frequency"};
    }
}

fields.frequency `string`

Defines the frequency column number to categorize the font size.

fields.htmlAttributes `string`

Defines the HTML attributes column for the anchor elements inside the each tag items.

fields.text `string`

Defines the tag value or display text.

fields.url `string`

Defines the URL link to navigate while click the tag.

htmlAttributes `object`

Specifies the list of HTML attributes to be added to TagCloud control.

Default Value

{}

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" [htmlAttributes]="htmlattributes"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

format `string|enum`

Defines the format for the TagCloud to display the tag items.See Format

Name	Description
Cloud	To render the TagCloud items in cloud format
List	To render the TagCloud items in list format

Default Value

ej.Format.Cloud

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" format="Cloud"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

maxFontSize `string|number`

Sets the maximum font size value for the tag items. The font size for the tag items will be generated in between the minimum and maximum font size values.

Default Value

“40px”

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" maxFontSize="10px"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

minFontSize `string|number`

Sets the minimum font size value for the tag items. The font size for the tag items will be generated in between the minimum and maximum font size values.

Default Value

“10px”

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" minFontSize="10px"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

query `object`

Define the query to retrieve the data from online server. The query is used only when the online dataSource is used.

Default Value

null

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" [titleText]="title" [dataSource]="dataManager" [query]="query" [fields]="fields"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    dataManager: any;
    query: any;
    fields: Object;
    title: string;
    constructor() {
       this.title = "Employee List";


this.dataManager = ej.DataManager({
      url:"http://mvc.syncfusion.com/Services/Northwnd.svc/"
});
     this.query = ej.Query().from("Orders").take(10);
    this.fields = { text: "CustomerID" , frequency: "EmployeeID" };
    }
}

showTitle `boolean`

Shows or hides the TagCloud title. When this set to false, it hides the TagCloud header.

Default Value

true

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" [showTitle]=true></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

titleImage `string`

Sets the title image for the TagCloud. To show the title image, the showTitle property should be enabled.

Default Value

null

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titleText="Tech Sites" [titleImage]="titleImage" [dataSource]="list" ></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    titleImage: string;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
        this.titleImage="../images/bird.png";
    }
}

titleText `string`

Sets the title text for the TagCloud. To show the title text, the showTitle property should be enabled.

Default Value

“Title”

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" [enableRTL]=true></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
}

Methods

insert(name)

Inserts a new item into the TagCloud

Name	Type	Description
name	string	Insert new item into the TagCloud

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Insert</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){
        var tag = { text: "google", url: "http://www.google.com", frequency: 12 };


var obj = $("#tag").data("ejTagCloud");


obj.insert(tag); 

}
}

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Insert</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){
        var tag = { text: "google", url: "http://www.google.com", frequency: 12 };

    $("#tag").ejTagCloud("insert", tag);   

}
}

insertAt(name,position)

Inserts a new item into the TagCloud at a particular position.

Name	Type	Description
name	string	Inserts a new item into the TagCloud
position	number	Inserts a new item into the TagCloud with the specified position

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Insert</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){
        var tag = { text: "google", url: "http://www.google.com", frequency: 12 };


var obj = $("#tag").data("ejTagCloud");


obj.insertAt(tag,2); 

}
}

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Insert</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){
        var tag = { text: "google", url: "http://www.google.com", frequency: 12 };

    $("#tag").ejTagCloud("insertAt", tag, 2);   

}
}

remove(name)</span>

Removes the item from the TagCloud based on the name. It removes all the tags which have the corresponding name

Name	Type	Description
name	string	name of the tag.

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Remove</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){


var obj = $("#tag").data("ejTagCloud");


obj.removeAt("Google"); 

}
}

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Remove</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){

    $("#tag").ejTagCloud("remove", "Google");   

}
}

removeAt(position)</span>

Removes the item from the TagCloud based on the position. It removes the tags from the the corresponding position only.

Name	Type	Description
position	number	position of tag item.

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Remove</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){


var obj = $("#tag").data("ejTagCloud");


obj.removeAt(2); 

}
}

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" ></ej-tagcloud>
</div>
<button type="button" (click)="OnClick()">Remove</button>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    OnClick(){

    $("#tag").ejTagCloud("removeAt", 2);   

}
}

Events

click

Event triggers when the TagCloud items are clicked

Name

Type

Description

argument

Object

Event parameters from button

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the TagCloud model
type	string	returns the name of the event
text	string	return current tag name
URL	string	return current URL link

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" (ejclick)="click($event)"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    click(args){
       

}
}

create

Event triggers when the TagCloud are created

Name

Type

Description

argument

Object

Event parameters from button

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the TagCloud model
type	string	returns the name of the event

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" (create)="create($event)"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    create(args){
       

}
}

destroy

Event triggers when the TagCloud are destroyed

Name

Type

Description

argument

Object

Event parameters from button

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the TagCloud model
type	string	returns the name of the event

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" (destroy)="destroy($event)"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    destroy(args){
       

}
}

mouseout

Event triggers when the cursor leaves out from a tag item

Name

Type

Description

argument

Object

Event parameters from button

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the TagCloud model
type	string	returns the name of the event
text	string	return current tag name
URL	string	return current URL link

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" (mouseout)="mouseout($event)"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    mouseout(args){
       

}
}

mouseover

Event triggers when the cursor hovers on a tag item

Name

Type

Description

argument

Object

Event parameters from button

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the TagCloud model
type	string	returns the name of the event
text	string	return current tag name
URL	string	return current URL link

Example

HTML

<div id="tagcloud_controls" style="margin-left: 35%;">
<ej-tagcloud id="tag" titletext="Tech Sites" [dataSource]="list" (mouseover)="mouseover($event)"></ej-tagcloud>
</div>

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

@Component({
    selector: 'ej-app',
    templateUrl: './default.component.html'
})
export class DefaultComponent {
    list: Array<any>;
    constructor() {

        this.list = [
            { text: 'Google', url: 'http://www.google.co.in', frequency: 12 },
            { text: 'a2zwebhelp', url: 'http://www.a2zwebhelp.com', frequency: 3 },
            { text: 'Arts Technica', url: 'http://arstechnica.com/', frequency: 8 },
            { text: 'Slider', url: 'http://bxslider.com/examples', frequency: 2 },
            { text: 'Yahoo', url: 'http://in.yahoo.com/', frequency: 12 },
            { text: 'Facebook', url: 'https://www.facebook.com/', frequency: 5 },
            { text: 'Blog', url: 'http://www.blogspot.com/', frequency: 8 },
            { text: 'Microsoft', url: 'http://www.microsoft.com/', frequency: 20 },
            { text: 'Amazon.com', url: 'http://www.amazon.com/', frequency: 1 },
            { text: 'MSN', url: 'http://www.msn.com/', frequency: 3 },
            { text: 'Engadget', url: 'http://www.engadget.com/', frequency: 5 },
            { text: 'LinkedIn', url: 'http://www.linkedIn.com/', frequency: 9 },
            { text: 'Twitter', url: 'http://www.Twitter.com/', frequency: 0 },
            { text: 'Menu', url: 'http://www.menucool.com', frequency: 3 },
            { text: 'BBC', url: 'http://www.bbc.co.uk/', frequency: 11 },
            { text: 'Valley', url: 'http://valleywag.gawker.com/', frequency: 6 },
            { text: 'slider', url: 'http://wowslider.com', frequency: 9 },
            { text: 'W3schools', url: 'http://www.w3schools.com/', frequency: 2 }

        ];
    }
    mouseover(args){
       

}
}

ejTagCloud

Example

Requires

Members

cssClass string

Default Value

Example

dataSource object

Default Value

Example

enableRTL boolean

Default Value

Example

fields object

Default Value

Example

fields.frequency string

fields.htmlAttributes string

fields.text string

fields.url string

htmlAttributes object

Default Value

Example

format string|enum

Default Value

Example

maxFontSize string|number

Default Value

Example

minFontSize string|number

Default Value

Example

query object

Default Value

Example

showTitle boolean

Default Value

Example

titleImage string

Default Value

Example

titleText string

Default Value

Example

Methods

insert(name)

Example

insertAt(name,position)

Example

remove(name)</span>

Example

removeAt(position)</span>

Example

Events

click

Example

create

Example

destroy

Example

mouseout

Example

mouseover

Example

cssClass `string`

dataSource `object`

enableRTL `boolean`

fields `object`

fields.frequency `string`

fields.htmlAttributes `string`

fields.text `string`

fields.url `string`

htmlAttributes `object`

format `string|enum`

maxFontSize `string|number`

minFontSize `string|number`

query `object`

showTitle `boolean`

titleImage `string`

titleText `string`