{"id":202278,"date":"2025-02-11T05:15:41","date_gmt":"2025-02-11T05:15:41","guid":{"rendered":"https:\/\/namso-gen.co\/blog\/how-to-get-ngmodel-value-in-typescript-file\/"},"modified":"2025-02-11T05:15:41","modified_gmt":"2025-02-11T05:15:41","slug":"how-to-get-ngmodel-value-in-typescript-file","status":"publish","type":"post","link":"https:\/\/namso-gen.co\/blog\/how-to-get-ngmodel-value-in-typescript-file\/","title":{"rendered":"How to get ngModel value in TypeScript file?"},"content":{"rendered":"

To get the value of ngModel in a TypeScript file, you can use angular’s ViewChild decorator along with ElementRef to access the value of the input field. Here’s how you can do it:<\/p>\n

“`typescript
\nimport { Component, ViewChild, ElementRef } from ‘@angular\/core’;<\/p>\n

@Component({
\n selector: ‘app-example’,
\n templateUrl: ‘.\/example.component.html’,
\n styleUrls: [‘.\/example.component.css’]
\n})
\nexport class ExampleComponent {
\n @ViewChild(‘inputField’) inputField: ElementRef;<\/p>\n

getValue() {
\n const value = this.inputField.nativeElement.value;
\n console.log(value);
\n }
\n}
\n“`<\/p>\n

In the above code snippet, we are using ViewChild decorator to get a reference to the input field with the template variable `#inputField`. We then use `ElementRef` to access the nativeElement of the input field and retrieve its value.<\/p>\n

**const value = this.inputField.nativeElement.value;**<\/p>\n

This line of code is where we are actually getting the ngModel value in TypeScript file.<\/p>\n

\n
\n

Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n