title: Angular 4 - show/hide element in DOM using Id of element
body: <p>I want to show a button (or append it to its parent element) with a specific <code>Id</code> when a function is called but I don't know how to access the element in the component class.</p>
  
  <pre><code>&lt;div *ngFor="let item of items; let i = index;"&gt;
  
      &lt;button [attr.id]="'undoBtn'+i" *ngIf="showBtn" class="editBtn" md-raised-button color="primary"&gt; 
          &lt;md-icon&gt;undo&lt;/md-icon&gt;Undo
      &lt;/button&gt;
  
      &lt;button (click)=showUndoBtn(i) md-raised-button color="primary"&gt;Test&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component class:</strong></p>
  
  <pre><code>private showBtn = false;
  
  showUndoBtn(btnId: number) {
      // show btn with id btnId in DOM
  }
  </code></pre>
  
  <p>The undo button must be hidden at the beginning and when Test button is clicked, it should appear. I tried using <code>*ngIf</code> and <code>@ViewChild()</code>  but it can not be used for several buttons with different id.</p>