title: Hide and Show in angular 2
body: <h1>problem</h1>
  
  <p>I am search this answer but not completlty working in my condition. <code>OnInIt</code> I get the user data from api and  display user status in a table within <code>*ngFor</code>. there is a span of user status <code>IsActive</code> that is a span. when I click on specific span it show drop-down on that row and hide its span and after selecting it drop-down hides and span again show. I want this on that specific row not all rows of the table. I have done drop-down functionality but span hide is no working as expected. In Image 1 I want to hide only specific span not all</p>
  
  <p>I use <code>spanHide : any= {};</code>
  and initialize it with false;</p>
  
  <pre><code>Object.keys(this.spanHide ).forEach(h =&gt; {
      this.spanHide [h] = false;
  });
  </code></pre>
  
  <p>but it not working </p>
  
  <h1>image1</h1>
  
  <p><a href="https://i.stack.imgur.com/cnUGt.png" rel="nofollow"><img src="https://i.stack.imgur.com/cnUGt.png" alt="enter image description here"></a></p>
  
  <h1>image2</h1>
  
  <p><a href="https://i.stack.imgur.com/5tNQy.png" rel="nofollow"><img src="https://i.stack.imgur.com/5tNQy.png" alt="enter image description here"></a></p>
  
  <h1>Code</h1>
  
  <pre><code>    spanHide: boolean = false;
      selectHide: any = {};
      constructor(
          private userService: UserService,
          private notificationService: NotificationsService) {
          this.progress = 'loading';
  
      }
  
  
      ngOnInit() {
          this.userService.getAllUser()
              .subscribe(data =&gt; {
                  this.isAuthorized = true;
                  this.data = data;
                  this.progress = 'active';
              },
              error =&gt; {
                  console.log("error while retriving users");
                  console.log(error);
                  this.userService.handleError(error);
              });
      }
      onChange(id, i) {
          this.selectHide[i] = false;
          this.spanHide = false; 
          this.userService.changeStatus(id)
              .subscribe(data =&gt; {
                  this.data = data.json();
              },
              error =&gt; console.log(error),
              () =&gt; {
                  this.userService.getAllUser() // TODO: Ahmed : fix this. it should not be called again
                      .subscribe(data =&gt; this.data = data,
                      error =&gt; {
                          console.log("error while retriving users");
                          this.userService.handleError(error);
                      });
                  this.notificationService.success('Success', 'user status changed', { id: 123 });
              });
  
      }
      show(item) {
          this.spanHide = true;
          Object.keys(this.selectHide).forEach(h =&gt; {
              this.selectHide[h] = false;
          });
          this.selectHide[item] = true;
      }
  
  }    constructor(
          private userService: UserService,
          private notificationService: NotificationsService) {
          this.progress = 'loading';
  
      }
  
  
      ngOnInit() {
          this.userService.getAllUser()
              .subscribe(data =&gt; {
                  this.isAuthorized = true;
                  this.data = data;
                  this.progress = 'active';
              },
              error =&gt; {
                  console.log("error while retriving users");
                  console.log(error);
                  this.userService.handleError(error);
              });
      }
      onChange(id, i) {
          this.selectHide[i] = false;
          this.spanHide = false; 
          this.userService.changeStatus(id)
              .subscribe(data =&gt; {
                  this.data = data.json();
              },
              error =&gt; console.log(error),
              () =&gt; {
                  this.userService.getAllUser() // TODO: Ahmed : fix this. it should not be called again
                      .subscribe(data =&gt; this.data = data,
                      error =&gt; {
                          console.log("error while retriving users");
                          this.userService.handleError(error);
                      });
                  this.notificationService.success('Success', 'user status changed', { id: 123 });
              });
  
      }
      show(item) {
          this.spanHide = true;
          Object.keys(this.selectHide).forEach(h =&gt; {
              this.selectHide[h] = false;
          });
          this.selectHide[item] = true;
      }
  
  }
  </code></pre>
  
  <h1>html</h1>
  
  <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>&lt;table class="table"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;&lt;search-box (update)="term=$event"&gt;&lt;/search-box&gt;&lt;/th&gt;
                              &lt;th&gt;&lt;invite-user *authorizeUser="invitePermission"&gt;&lt;/invite-user&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr *ngFor="let user of data |search: term | paginate: config; let i=index"&gt;
                              &lt;!--&lt;td&gt;{{ (config.currentPage - 1) * config.itemsPerPage + i +1 }}&lt;/td&gt;--&gt;
                              &lt;!--&lt;td style="width:15px;"&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;--&gt;
  
                              &lt;td class="col-xs-10"&gt;
                                  &lt;h4 style="margin-bottom:0px;"&gt;&lt;a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;"&gt;{{user.FirstName}} {{user.LastName}}&lt;/a&gt;&lt;/h4&gt;
                                  &lt;p style="margin-bottom:0px;"&gt;{{user.Email}}&lt;/p&gt;
                                  &lt;p class="margin-bottom-5"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; Developer&lt;/p&gt;
                              &lt;/td&gt;
                              &lt;td class="col-xs-2"&gt;
                                  &lt;span id="span" *ngIf="spanHide == false" (click)="show(i)"&gt;
  
                                          &lt;span *ngIf="user.IsActive== true"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;Active&lt;/span&gt;
                                          &lt;span *ngIf="user.IsActive== false"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;Block&lt;/span&gt;
                                          &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;
                                      
                                  &lt;/span&gt;
                                  &lt;section *ngIf="selectHide[i] == true"&gt;
                                      &lt;label class="select"&gt;
                                          &lt;select (change)="onChange(user.Id,i)" &gt;
                                              &lt;option disabled&gt;Select&lt;/option&gt;
                                              &lt;option *ngIf="user.IsActive == true"&gt;Block&lt;/option&gt;
                                              &lt;option *ngIf="user.IsActive == false"&gt;Active&lt;/option&gt;
                                          &lt;/select&gt;
                                          
                                      &lt;/label&gt;
                                  &lt;/section&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>