title: Can I search filter through a child component? (Angular)
body: <p>I've got a parent component that I'm passing data down to a child component with *ngFor / @input. That child component is created x number of times depending on how many objects are in the pciData array</p>
  
  <p>pciData is an array of about 700 data objects, all with a "hostname" property/value.  when passed down to app-system, the hostname of that object shows on a button. I want the end user to be able to filter through those buttons by that hostname, only showing the app-system components that match.</p>
  
  <p>On the parent component template, how would I create a search bar that can filter the app-system components by their hostname property values?  In the code below, I've tried piping this like:  </p>
  
  <p><code>&lt;ng-container *ngFor="let system of pciData | searchFilter: system.hostname  | paginate: { itemsPerPage: 180, currentPage: p }; let i = index "&gt;</code> </p>
  
  <p>but "system" comes back undefined.   However, when I just type in {{system.hostname}} in the template under the loop, it does loop through every single object and display the hostname.  Any assistance would be appreciated.</p>
  
  <p>Here's the parent component. I've removed the implimentation that I tried to do with the filter to avoid confusion:</p>
  
  <pre><code>import { Observable } from 'rxjs';
  import { Ipcidata } from '../Shared/Ipcidata';
  import { map, filter, switchMap } from 'rxjs/operators';
  import { Ng2SearchPipeModule } from 'ng2-search-filter';
  
  
  
  
  @Component({
    selector: 'app-system-status',
    templateUrl: './system-status.component.html',
    styleUrls: ['./system-status.component.css'],
  })
  
  export class SystemStatusComponent implements OnInit {
  
  
    @Input() pciData: any;
  
  
  
  constructor() {}
    searchText;
    p: number;
    filteredValues : any;
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p>Here's the parent template, "app-system" is what I'm trying to search through the values of :</p>
  
  <pre><code>
  &lt;ngx-spinner&gt;&lt;/ngx-spinner&gt;
  
  &lt;section class="app-container"&gt;
  
    &lt;div class ="card-container"&gt;
      &lt;ng-container *ngFor="let system of pciData | paginate: { itemsPerPage: 180, 
        currentPage: p }; let i = index "&gt;
        &lt;div class='cardboi'&gt;
          &lt;app-system [systemInput]="system"&gt;&lt;/app-system&gt;
  
        &lt;/div&gt;
      &lt;/ng-container&gt;  
    &lt;/div&gt;
    &lt;div class="pagination-container"&gt;
      &lt;pagination-controls class='paginator' (pageChange)="p = $event"&gt;&lt;/pagination-controls&gt; 
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>lastly, here is the child template, to which the search bar filter should only show what the user inputs as the hostname. This is essentially just a button that pops up more data about that host when clicked. Again, the point of this is only to show the buttons with a certain hostname.</p>
  
  <pre><code>
    &lt;button  (click)="openDialog()" [ngClass]="{
      'btn buttonGood':isValid(),
      'btn buttonDateAlert':isValid()=='datewarning',
      'btn buttonAlert':isValid()==false
    }"&gt;{{systemInput.hostname.slice(0,13) | uppercase}}&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks again for anyone who can help me with this.</p>