title: Angular - Using *ngIf with *ngFor to specific rows in table
body: <p>I'm pretty new to Angular and I'm trying to make a pipe to filter items out of my table and am not quite sure how to go about that. I'm trying to only display the table fields where the EmpKey = empInfo[selectedEmployee].EmpKey. Any help would be greatly appreciated! Thanks in advance!</p>
  
  <p>Here's my tracker.component.html</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-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}"&gt;
      &lt;button class="form-control" style="width:150px;" (click)="toggleSummary()"&gt;Open Summary&lt;/button&gt;
      &lt;select id="empName" [(ngModel)]="selectedEmployee"&gt;
        &lt;option selected="selected" disabled&gt;Employee Name...&lt;/option&gt;
        &lt;option *ngFor="let emp of empInfo; let i = index" [ngValue]="i"&gt;{{i}} - {{emp.EmpID}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="PTOtype"&gt;
        &lt;option selected="selected" disabled&gt;Type of PTO...&lt;/option&gt;
        &lt;option value="PTO"&gt;PTO&lt;/option&gt;
        &lt;option value="ETO-Earned"&gt;ETO - Earned&lt;/option&gt;
        &lt;option value="ETO-Used"&gt;ETO - Used&lt;/option&gt;
        &lt;option value="STDLTD"&gt;STD/LTD&lt;/option&gt;
        &lt;option value="Uncharged"&gt;Uncharged&lt;/option&gt;
      &lt;/select&gt;
      &lt;button class="form-control" style="width: 150px;" (click)="nextEmployee()"&gt;Next&lt;/button&gt;
      &lt;button class="form-control" style="width: 150px;" (click)="previousEmployee()"&gt;Previous&lt;/button&gt;
      &lt;h2 *ngIf="empInfo &amp;&amp; empInfo.length &gt; selectedEmployee"&gt;{{empInfo[selectedEmployee].FirstName}} {{empInfo[selectedEmployee].EmpKey}}&lt;/h2&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Full/Half&lt;/th&gt;
            &lt;th&gt;Hours&lt;/th&gt;
            &lt;th&gt;Scheduled?&lt;/th&gt;
            &lt;th&gt;Notes&lt;/th&gt;
            &lt;th&gt;In P/R?&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr *ngFor="let pto of ptoData&gt;
            &lt;td&gt;{{pto.date | date: 'MM/dd/y'}}&lt;/td&gt;
            &lt;td&gt;{{pto.EmpKey}}&lt;/td&gt;
            &lt;td&gt;{{pto.fullhalf}}&lt;/td&gt;
            &lt;td&gt;{{pto.hours}}&lt;/td&gt;
            &lt;td&gt;{{pto.scheduled}}&lt;/td&gt;
            &lt;td&gt;{{pto.notes}}&lt;/td&gt;
            &lt;td&gt;{{pto.inPR}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div *ngIf="isHidden" class="col-xs-5"&gt;
          &lt;pto-summary [selectedEmployee]="selectedEmployee"&gt;&lt;/pto-summary&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's my tracker.component.ts</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>import { Component, OnInit, Input } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { PTODataService } from './pto-data.service';
  import { PTOData } from './pto-data';
  import { EmpInfoService } from './emp-info.service';
  import { EmpInfo } from './emp-info'; 
  
  @Component({
      selector: 'pto-tracker',
      templateUrl: `./tracker.component.html`,
      styleUrls: ['./tracker.component.css']
  })
  
  export class TrackerComponent implements OnInit{
      empInfo: EmpInfo[];
      ptoData: PTOData[];
      isHidden: boolean = false;
      public selectedEmployee: number;
  
      constructor(
          private empInfoService: EmpInfoService,
          private ptoDataService: PTODataService) { }
  
      getEmpInfo(): void {
          this.empInfoService.getEmpInfos().then(
              empInfo =&gt; this.empInfo = empInfo
              );
      }
  
      getPTOData(): void {
          this.ptoDataService.getPTODatas().then(
              ptoData =&gt; this.ptoData = ptoData
          );
      }
  
      ngOnInit(): void {
          this.getEmpInfo();
          this.getPTOData();
      }
  
      toggleSummary(): void {
          this.isHidden = !this.isHidden;
      }
  
      nextEmployee(): void {
          this.selectedEmployee = this.selectedEmployee+1;
      }
  
      previousEmployee(): void {
          this.selectedEmployee = this.selectedEmployee-1;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks again!</p>
  
  <p><strong>EDIT for Clarification</strong> - The user will select an employee from a dropdown list which will give me the index of the employee that was chosen. from there, I want to filter out the results that don't contain that EmpKey by using the value from empInfo[selectedEmployee].EmpKey. In the table, there are many different EmpKeys and whenever a user is selected, I only want the fields that share that EmpKey to be printed out and change to another employees whenever a different one is selected.</p>