Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [disabled]="true">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the displayMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [displayMember]="'ContactName'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the dropDownWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [dropDownWidth]="300">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the items property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [items]="10">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the maxLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [maxLength]="10">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minLength property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [minLength]="2">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the opened property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [opened]="true">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the placeHolder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [popupZIndex]="99999">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the query property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [query]="'item'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the renderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [renderer]="renderer">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the roundedCorners property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [roundedCorners]="true">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [rtl]="true">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [scrollBarSize]="15">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

enum TextAreaSearchMode {
     none,
     contains,
     containsignorecase,
     equals,
     equalsignorecase,
     startswithignorecase,
     startswith,
     endswithignorecase,
     endswith
}

Sets or gets the searchMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [searchMode]="'containsignorecase'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [source]="source">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [theme]="'energyblue'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the valueMember property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'" [valueMember]="'CompanyName'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxTextArea.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea(onChange)="Change($event)"
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the auto-suggest popup is closed.

Code examples

Bind to the close event of jqxTextArea.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea(onClose)="Close($event)"
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when the auto-suggest popup is opened.

Code examples

Bind to the open event of jqxTextArea.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea(onOpen)="Open($event)"
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}

							

						

This event is triggered when an item is selected from the auto-suggest popup.

Code examples

Bind to the select event of jqxTextArea.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea(onSelect)="Select($event)"
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent {
    Select(event: any): void 
    {
        // Do Something
    }

    
}

							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

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

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

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

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTextArea.refresh();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

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

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

    ngAfterViewInit(): void 
    {
        this.myTextArea.selectAll();
    }

    
}
							

						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTextArea #myTextArea
             [width]="300" [height]="90" [placeHolder]="'Enter a sentence'">
        </jqxTextArea>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTextArea') myTextArea: jqxTextAreaComponent; 
 

    ngAfterViewInit(): void 
    {
        let value = this.myTextArea.val();
    }

    
}