Unlock the Potential: How to Pass Textbox Value to TypeScript Function in AngularJS

AngularJS, a powerful JavaScript framework, empowers developers to create dynamic web applications with ease. One common task developers encounter is passing textbox values to TypeScript functions within an AngularJS environment. In this guide, we’ll delve into the process step by step, ensuring clarity and understanding at every turn.

Understanding the Challenge: Passing Textbox Value to TypeScript Function

Before we dive into the solution, let’s outline the challenge. In AngularJS, interacting with textbox values and passing them to TypeScript functions involves navigating the framework’s intricacies. However, with the right approach, this task becomes manageable and efficient.

Accessing Textbox Value in AngularJS

The first step is to access the value entered into the textbox within the AngularJS framework. We achieve this by utilizing AngularJS’s data binding capabilities. By binding the textbox to a model, we establish a connection that enables seamless data retrieval.

First Create the Customer Model Class export class Customer {   CustomerName: string=”Customer Name”; } In here I explain how to pass Customer name value to the .ts file when Button click event

Customer.html File

<table>
  <tr>
    <td>
      Customer Name :
    </td>
    <td>
      <input type="text" name="CustomerName" value="CustomerName"     
            [(ngModel)]="customerDtl.CustomerName" placeholder="Customer Name">
    </td>   
  </tr>
  <tr>
    <td>
      <input type="button" name="btnSubmit" value="Submit" (click)="onClick(customerDtl.CustomerName)">
    </td>
  </tr>
</table>
<p>Value: {{ customerDtl.CustomerName }}</p>

Customer.ts  File

import { Component, OnInit } from '@angular/core';
import { Customer } from '../../Models/Customer';


@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.sass']
})
export class CustomerComponent implements OnInit {


  constructor(private customerDtl: Customer) { }
  ngOnInit() {
  }


  public onClick(CustomerName: any) {
    alert(CustomerName);
  }
}

Import Notes

1.  You need to import customer model class in Customer.ts file
       import { Customer } from '../../Models/Customer';
2.  You need to import FormsModule app.module.ts file


import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent,
    CustomerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [Customer],
  bootstrap: [AppComponent]


})

Conclusion

Passing textbox values to TypeScript functions in AngularJS may seem complex at first glance. However, by leveraging AngularJS’s data binding and controller mechanisms, developers can streamline this process effectively. With a clear understanding of the steps involved, harnessing the power of AngularJS for dynamic web applications becomes second nature. Unlock the potential of your AngularJS projects by mastering textbox value manipulation and function invocation.