title: why am I getting details of all heroes?
body: <p>I want details of specific hero on click of show more.
  right now I am getting all hero details on single show more click</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> Favourites are as below
      &lt;ul *ngFor ="let item of acts;let i =index;"&gt;
        &lt;li&gt;{{item.name}} ``
            &lt;button (click)="getHeroDetails(i)"&gt;show More&lt;/button&gt;
             &lt;p *ngIf="i == item"&gt;{{detail}}&lt;/p&gt; 
        &lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;button (click)="clearList()"&gt;Remove&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>