title: Getting Data from HTTP on click
body: <p>I am learning angular ( using angular 5). In the project I have to GET data via HTTP and on click of each element i have to display the details.</p>
  
  <p>I am able to Get the data via HTTP and also able to get details based on clicked element. But I cant show the details, or in other words I dont know how can i show the details.</p>
  
  <p>Here what I have tried.</p>
  
  <pre><code>allEntry = [];
  onClickData = [];
   getAllData = function() {
          this.httpClient.get(this.resourceUrl)
              .subscribe(
                  (data: any[]) =&gt; {
                      this.allEntry = data;
                  }
              )
      }
  
  
      onClick(id: number) {
          const myData = this.allEntry .find((element) =&gt; element.id === id)
          console.log(myData)
          this.onClickData = myData;
      }
  </code></pre>
  
  <p>The templete</p>
  
  <pre><code>&lt;div *ngFor ="let el of allEntry "&gt;
     &lt;button (click)="onClick(el.id)"&gt;{{el.name}}&lt;/button&gt; 
  
  &lt;/div&gt;
  
  &lt;div *ngFor ="let e of onClickData"&gt;
      {{e.title}}
  {{e.age}}
  {{e.name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>each entry in allEntry contains id,title, name and age. now show i have to display the details on click of a name.</p>
  
  <p>Thanks in advance </p>