Question: I'm using angularjs for my website. Where I want to get the value of p tag which coming dynamically from api. For that I used jQuery in `.ts` file. That is `$('p.s').html();`. But m getting only first response of api means. Not getting value of hovered element. How to get this. Because I want to show the cities by state on hover where both coming through state and city api.

Below is my `ts` and `html` code

```
   getStates(){
    this.httpclient.post('http://blabla/api/States','').subscribe((result:any) => {
      this.states = result;

    })
  }

  getCities(){
      var statev = $('.s').html();
     this.httpclient.post('http://blalbla/api/Cities?Statename='+statev,'').subscribe((result:any) => {
      this.cities = result;

    })  
  }

```

Below is my `html` code

```
<div class="other-state">
    <h3>Choose Other Cities</h3>
    <ul>
        <li  class="states-name" *ngFor="let state of states">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Mumbai_03-2016_30_Gateway_of_India.jpg/200px-Mumbai_03-2016_30_Gateway_of_India.jpg" class="citypic">
            <p (mouseover)="getCities()" class="s" >{{state.StateName}}</p>

        </li>
        <div class="hover-city">
                <ul>
                    <li *ngFor="let city of cities">
                        <span>{{city.CityName}}</span>
                    </li>       

                </ul>
        </div>

    </ul>

</div>

```

Answer: 
Instead of adding jQuery to your website, you should be getting the html from `event.target` and modify your mouseover event bind to `getCities($event)`
(more about it [here](https://angular.io/guide/user-input) )

also this : `$('.s')` [selects all the elements with the `s` css class](http://api.jquery.com/class-selector/) 

Solution should look like this : (extract)

**html**

```
<p (mouseover)="getCities($event)" class="s" >{{state.StateName}}</p>

```

**ts**

```
getCities(event) {
  var statev = event.target.textContent
  // api call etc
}

```

**EDIT :** [Plunker example](http://plnkr.co/edit/1j4Q0ZZ9IVajhImiNqXR?p=preview)
I suggest you to remove jQuery and then pass at the getCities function the event param of mouseover, so you Can take the value of p with event.target.innerText prop!

[EDIT]

E.g.

html:

```
<p (mouseover)="getCities($event)" class="s" >{{state.StateName}}</p>

```

`$event` is a reserved variable and indicates the event fired (like a MouseOver event).

Then, we need to change the .ts file and retrieve the event variable, so we can get the text of the triggered paragraph.

ts:

```
getCities(event: MouseEvent){
  var statev = (<HTMLParagraphElement>event.target).innerText;
  this.httpclient.post('http://blalbla/api/Cities?Statename='+statev,'').subscribe((result:any) => {
     this.cities = result;
  })  
}

```

Now we added a event param that is a MouseEvent type and our statev variable get, from an event triggered on a HTML Paragraph Element, the innerText property.

Check [here](https://developer.mozilla.org/en-US/docs/Web/Events/mouseover) the event proprerties;

Check [here](https://angular.io/guide/user-input) the $event functionality of angular.