Angular UI Components Documentation

Sets or gets the animationShowDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [animationShowDelay]="300"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [animationHideDelay]="300"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the boxSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [boxSize]="'15px'"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the checked property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [checked]="true"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

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

Sets or gets the enableContainerClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [enableContainerClick]="true"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the groupName property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [groupName]="'panel'"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

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

Sets or gets the hasThreeStates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [hasThreeStates]="true"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the locked property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [locked]="true"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

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

Sets or gets the theme property.

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

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox  [width]="300"></jqxCheckBox>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the checkbox is checked.

Code examples

Bind to the checked event of jqxCheckBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox (onChecked)="Checked($event)"></jqxCheckBox>
    `
})
 
export class AppComponent {
    Checked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This is triggered when the checkbox's state changes from one state to another.

Code examples

Bind to the change event of jqxCheckBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox (onChange)="Change($event)"></jqxCheckBox>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the checkbox's checked property is going to be null.

Code examples

Bind to the indeterminate event of jqxCheckBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox (onIndeterminate)="Indeterminate($event)"></jqxCheckBox>
    `
})
 
export class AppComponent {
    Indeterminate(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the checkbox is unchecked.

Code examples

Bind to the unchecked event of jqxCheckBox.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox (onUnchecked)="Unchecked($event)"></jqxCheckBox>
    `
})
 
export class AppComponent {
    Unchecked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.check();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.indeterminate();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.toggle();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myCheckBox.uncheck();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxCheckBox #myCheckBox ></jqxCheckBox>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myCheckBox') myCheckBox: jqxCheckBoxComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myCheckBox.val();
    }

    
}