Angular UI Components Documentation

enum ComplexInputDecimalNotation {
     default,
     exponential,
     scientific,
     engineering
}

Sets or gets the decimalNotation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [decimalNotation]="'exponential'">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

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

Sets or gets the height property.

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

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [placeHolder]="'Enter a complex number'">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the roundedCorners property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [roundedCorners]="false">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

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

Sets or gets the spinButtons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [spinButtons]="true">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the spinButtonsStep property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [spinButtonsStep]="10">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

enum ComplexInputTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [template]="'primary'">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

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

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25" [value]="'190 - 17i'">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

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

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxComplexInput.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput (onChange)="Change($event)"
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myComplexInput.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myComplexInput.getReal();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myComplexInput.getImaginary();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myComplexInput.getDecimalNotation();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myComplexInput.render();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myComplexInput.refresh();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxComplexInput #myComplexInput 
             [width]="250" [height]="25">
        </jqxComplexInput>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myComplexInput') myComplexInput: jqxComplexInputComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myComplexInput.val();
    }

    
}