I'm new in Angular2, and I'm used to use Jquery, but I can't use Jquery in Angular 2. I want to get the text of an element that I'm clicking (like using the function $(this).text()in Jquery) in angular 2.
For Angular versions,less than 8, viewChild is annotated with ElementRef type in component to read the input value. Finally, read the input value using ElementRef.nativeElement.value. Controller typescript component on reading input element value on button click.
Form contains multiple html input elements to take input from the user. button allows the user to submit the from to backend API an d it calls click binding event. In Angular, View is html template and controller is an typescript component. Reading input text is basic concept every Angular developer need to know.
For Angular versions,less than 8, viewChild is annoted with ElementRef type in component to read the input value. Finallly, read the input value using ElementRef.nativeElement.value. Controller typescript component on reading input element value on button click. This talks about how to read input text value in typescript.
Let’s add changes in the Angular component. In Html template component- app.component.html: Added click event to a button with event binding syntax i.e bracket () symbol the event name is the name of the function placed inside the bracket. This function is called when the button is clicked.
<div #myElement (click)="doSomething(myElement.innerText)">someText</div>
or
<div (click)="doSomething($event.target.innerText)">someText</div>
class MyComponent {
doSomething(text) {
console.log(text);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With