Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the text from an element by clicking in angular 2

Tags:

angular

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.

like image 762
angel Avatar asked Aug 01 '16 16:08

angel


People also ask

How to read input element value on button click in angular?

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.

What is the use of input form in angular?

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.

How to read input text value in typescript in angular?

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.

How to add click event to a button in angular?

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.


1 Answers

<div #myElement (click)="doSomething(myElement.innerText)">someText</div>

or

<div (click)="doSomething($event.target.innerText)">someText</div>
class MyComponent {
  doSomething(text) {
    console.log(text);
  }
}
like image 151
Günter Zöchbauer Avatar answered Sep 28 '22 06:09

Günter Zöchbauer