title: Angular-Make delete button that have *ngIf condition always visible
body: <p>i need help about how to make my delete button always visible without click update button or a row first. I learn a tutorial from <a href="https://www.youtube.com/watch?v=wQ5z9SFBlek" rel="nofollow noreferrer">this link</a>. The project is using <a href="https://github.com/angular/angularfire2" rel="nofollow noreferrer">angularFire2</a>. He make the data clickable then it appears on the form and then he can update/delete it. What i need to do is make the delete button already visible for each row with the <code>*ngIf="ProductService.selectedProduct.$prdKey != null"</code> condition is still there.
  If i change the condition to <code>...==null</code>", the delete button always visible but button become delete all data. </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-js lang-js prettyprint-override"><code>//service.ts file
  export class Product {
    $prdKey: string;
    prdName: string;
    prdCat: string; //category
    prdSup: string; //supplier
  }
  
  deleteProduct(key: string) {
    this.productList.remove(key);
  }
  
  updateProduct(prd: Product) {
    this.productList.update(prd.$prdKey, {
      prdName: prd.prdName,
      prdCat: prd.prdCat,
      prdSup: prd.prdSup,
    })
  }</code></pre>
  </div>
  </div>
  </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-js lang-js prettyprint-override"><code>//component.ts file
  
  isVisible:boolean = true;
  
  onSubmit(form: NgForm) {
    if (form.value.$prdKey == null) {
      this.ProductService.insertProduct(this.ProductService.selectedProduct);
    } else {
      this.ProductService.updateProduct(this.ProductService.selectedProduct);
    }
    this.resetForm(form);
  }
  
  onDelete($prdKey: string) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.ProductService.deleteProduct($prdKey);
    }
  }
  
  onItemClick(prd: Product) {
    this.ProductService.selectedProduct = Object.assign({}, prd);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form #productForm="ngForm" (ngSubmit)="onSubmit(productForm)"&gt;
    ...
  &lt;/form&gt;
  &lt;tr *ngFor="let product of productList"&gt;
    &lt;td&gt;{{product.prdName}}&lt;/td&gt;
    &lt;td&gt;{{product.prdCat}}&lt;/td&gt;
    &lt;td&gt;{{product.prdSup}}&lt;/td&gt;
    &lt;td&gt;&lt;button type="button" (click)="onItemClick(product)"&gt;Update&lt;/button&gt;&lt;/td&gt;
    &lt;td&gt;&lt;button type="button" *ngIf="ProductService.selectedProduct.$prdKey != null" (click)="onDelete(productForm) || isVisible"&gt;Delete&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>