title: Filtering data with dropdown and Angular 7
body: <p>I understand that Angular 4+ doesn't use pipes to filter data.</p>
  
  <p>I have a parent component with a set of drop-down buttons for different methods of filtering.</p>
  
  <pre><code> &lt;div class="btn-group" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Main Indicator&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let main of macroDataMainIndicators"&gt;
                      &lt;span class="dropdown-item macMainIndicatorFilter"&gt;
                        {{ main }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="btn-group ml-2" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Series Category&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let cats of macroSeriesCategories"&gt;
                      &lt;span class="dropdown-item macSeriesCatFilter"&gt;
                        {{ cats }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="btn-group ml-2" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Series Type&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let t of macroDataSeriesTypes"&gt;
                      &lt;span class="dropdown-item macSeriesTypeFilter"&gt;
                        {{ t }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="btn-group ml-2" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Country&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let country of macroCountries"&gt;
                      &lt;span class="dropdown-item macCountryFilter"&gt;
                        {{ country }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="btn-group ml-2" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Database&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let dbs of macroDatabases"&gt;
                      &lt;span class="dropdown-item macDBFilter"&gt;
                        {{ dbs }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="btn-group ml-2" dropdown&gt;
                  &lt;button id="button-basic" dropdownToggle type="button" class="btn btn-outline-teal dropdown-toggle"
                          aria-controls="dropdown-basic"&gt;
                    Sector&lt;span class="caret ml-1"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                      role="menu" aria-labelledby="button-basic"&gt;
                    &lt;li role="menuitem" *ngFor="let macSect of macroSectors"&gt;
                      &lt;span class="dropdown-item macSectFilter"&gt;
                        {{ macSect }}
                      &lt;/span&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>Further down in the same html, I have my child component:</p>
  
  <pre><code>&lt;app-search-results-list [filterDataBy]="filterBy" [data]="macroDataSets"&gt;&lt;/app-search-results-list&gt;
  </code></pre>
  
  <p>The parent component gets the data from the api, arranges it in a certain way, then passes it to the child component <code>(app-search-results-list)</code> via the <code>[data]</code> property, which then displays a table of data.</p>
  
  <p>The <code>Search-Results-List</code> Component has an Input property of</p>
  
  <pre><code>@Input() data: Series[];
  </code></pre>
  
  <p>The goal here is that data is received from the api. The parent component has the filter properties via the dropdowns. The list of data is kept in the child component. When the user clicks on an item in one of the drop-downs, I need to send that data to the child component.</p>
  
  <p>I can't do <code>(click)="filterBy = {{main}}"</code> (using the first dropdown html as an example) because interpolation doesn't work in the expression.</p>
  
  <p>In the child component, I need to know at least what is being filtered (the string text in the drop-down item), and preferably, the general type of filter (country, main indicator...). </p>
  
  <p>I wonder if it's easier just to pass an object with <code>(click)="onFilter($event)"</code> to the child component and let the child component sort it out, or try to someway pass the interpolated string from each drop-down. Any thoughts?</p>