ejTagCloud

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>
  • ts
  • 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>
  • ts
  • 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.

  • ts
  • <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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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){
           
    
    }
    }