title: How to call a function only once inside mouseover function in typescript?
body: <p>I am using angular7. In my application I am showing a list of places. when i hover on any one place I am calling an ajax function to store that value in database. </p>
  
  <p>But when I hover on any one element, that ajax function get called multiple times. I want to call that function only once.  </p>
  
  <p>Here is my angular code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let place of mapData" (mouseover)="displayTagInfo($event)"&gt;
    &lt;div class="filter-name"&gt;{{place.name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>