Hi All,Here, i will show you how to set value using id in angular. This post will give you simple example of angular get input value by id. Here you will learn document getelementbyid set value angular. let’s discuss about angular get element by id value. Here, Creating a basic example of how to get value using id in angular.
In this article, i will show you how to get and set value by id in angular 7, angular 8, angular 9 and angular 10 application.
Here, we will simply take one input text box field with two buttons call "get value" and "reset value". when you click on get value button then we will get value using ElementRef id and when you click on the reset button then we will set the value using ElementRef id.
So, let's see simple example and i hope it can help you.
src/app/app.component.ts
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@ViewChild("myNameElem") myNameElem: ElementRef;
getValue() {
console.log(this.myNameElem.nativeElement.value);
}
resetValue() {
this.myNameElem.nativeElement.value = "";
}
}
src/app/app.component.html
<input type="text" name="name" #myNameElem>
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>
Ouput:
You can see bellow layout:
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example