Add textbox programmatically in Angular Textbox component
17 Nov 20223 minutes to read
- Import the
Input
modules fromej2-inputs
library as shown below.
import {Input} from '@syncfusion/ej2-inputs';
-
Pass the
HTML Input
element as parameter to thecreateInput
method. -
You can also add the
icons
on the input by passingbuttons
property value with the class namee-input-group-icon
as parameter to thecreateInput
method.
import { Component } from '@angular/core';
import { Input } from '@syncfusion/ej2-inputs';
@Component({
selector: 'app-root',
template: `<div class="wrap">
<input id="textbox" type="text" placeholder="Enter Name" />
<input id="textbox-icon" type="text" />
</div>`
})
export class AppComponent {
ngOnInit() {
let element: HTMLInputElement = document.getElementById('textbox');
Input.createInput ({
element: element
});
let element1: HTMLInputElement = document.getElementById('textbox-icon');
Input.createInput ({
element: element1,
buttons: ['e-input-group-icon e-input-down'],
properties: {
placeholder:'Enter Value'
}
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);