DevExtreme Angular - Overview
The TextBox is a widget that enables a user to enter and edit a single line of text.
The following code adds a simple TextBox with a placeholder to your page.
HTML
TypeScript
- <dx-text-box
- placeholder="Type a text here...">
- </dx-text-box>
- import { DxTextBoxModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxTextBoxModule
- ],
- // ...
- })
If an end user should not be able to edit the value in the TextBox, assign true to the readOnly option. In this case, make sure to set the value option too.
HTML
TypeScript
- <dx-text-box
- value="The text that should not be edited"
- [readOnly]="true">
- </dx-text-box>
- import { DxTextBoxModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxTextBoxModule
- ],
- // ...
- })
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TextBox - Task-Specific Modes
- TextBox - Handle the Value Change Event
- TextBox - Handle the Keyboard Events
- TextBox - Limit the String Length
- TextBox - Specify a Mask for the Input
- TextBox API Reference
- TextArea
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.