Sets or gets the delay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [delay]="100">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [disabled]="true">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the imgSrc property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [imgPosition]="'left'" [imgSrc]="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
             [imgHeight]="14" [imgWidth]="14">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the imgWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [imgPosition]="left" [imgSrc]="https://jqwidgets.com/jquery-widgets-demo/images/andrew.png" [imgHeight]="14"
             [imgWidth]="14">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the imgHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [imgPosition]="left" [imgSrc]="https://jqwidgets.com/jquery-widgets-demo/images/andrew.png" [imgHeight]="14"
             [imgWidth]="14">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

enum ButtonPositions {
     left,
     center,
     right,
     top,
     bottom,
     topLeft,
     bottomLeft,
     topRight,
     bottomRight
}

Sets or gets the imgPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [imgPosition]="'left'" [imgSrc]="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
            >
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

enum ButtonRoundedCorners {
     top,
     bottom,
     all,
     left,
     right,
     top-right,
     top-left,
     bottom-right,
     bottom-left
}

Sets or gets the roundedCorners property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [roundedCorners]="'top'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [rtl]="true">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

enum ButtonPositions {
     left,
     center,
     right,
     top,
     bottom,
     topLeft,
     bottomLeft,
     topRight,
     bottomRight
}

Sets or gets the textPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [textPosition]="'right'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

enum ButtonTextImageRelation {
     imageBeforeText,
     imageAboveText,
     textAboveImage,
     textBeforeImage,
     overlay
}

Sets or gets the textImageRelation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [imgPosition]="'left'" [imgSrc]="'https://jqwidgets.com/jquery-widgets-demo/images/andrew.png'"
             [textImageRelation]="'imageBeforeText'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [theme]="'energyblue'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

enum ButtonTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     inverse,
     info,
     link
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [template]="'success'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the toggled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [toggled]="true">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="240px" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40" [value]="'Button'">
        </jqxButton>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the button is clicked.

Code examples

Bind to the click event of jqxButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton (onClick)="Click($event)"
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent {
    Click(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myButton.check();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

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

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myButton.focus();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myButton.render();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myButton.toggle();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myButton.unCheck();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButton #myButton 
             [width]="120" [height]="40">
        </jqxButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButton') myButton: jqxButtonComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myButton.val(New Text);
    }

    
}