title: How to show clicked element in *ngFor list hiding others using Angular 2
body: <p>I want the clicked element in ngFof to display info hidden by ngIf.
  Right now clicking on an image all hidden elements are displayed.
  How to show the info of the single clicked image?</p>
  
  <p>I do not use jquery in my example because I could not get it to work. 
  I am looking to find out how to do it in angular2 before accepting other solutions.
  <a href="https://plnkr.co/edit/Sa6zXzFtqL6beIEbJC52?p=preview" rel="nofollow noreferrer">plunker</a></p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code> @Component({
  
    selector: 'hello-world',
    template: 'src/hello_world.html',
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES]
  
  })
  export class HelloWorld {
  
      clicked() {// only show clicked img info 
        e=event.target;
        console.log(e);
        this.show=!this.show;
    };
  
    info = [{
      data: "information for img1:",
      data2: "only the info img1 is displayed"
    },
      {
        data: "information for img2:",
        data2: "only the info for img2 is displayed"
      },
      {
        data: "information for img3:",
        data2: "only the  info for img3 is displayed"
      }]
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div  *ngFor="#x of info"&gt;
  &lt;img src="http://lorempixel.com/150/150"  (click)="clicked($event)" &gt;
  
  
    &lt;div *ngIf="show"&gt;
        &lt;div class="names"&gt;
          &lt;div class="fullName"&gt;{{x.data}}&lt;/div&gt;
          &lt;div&gt;{{x.data2}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>I found this post that has a similar problem albeit I could not implement it in my code.
  <a href="https://stackoverflow.com/questions/36147809/angular2-get-reference-to-element-created-in-ngfor">angular2-get-reference-to-element-created-in-ngfor</a></p>