title: Angular2 filtering checkboxes
body: <p>I have an Angular2 grid that contains an array of Fabrics. These Fabrics have properties such as color or fabric Type. Right now the grid has them all displaying. I need to some how have a series of checkboxes for the color and fabric type with the amount occurring next to it.  The grid displays the filtered Fabrics only after a button of apply filter is clicked. However when a checkbox is selected the other checkboxes counts change. </p>
  
  <p>Ex.</p>
  
  <p><a href="https://i.stack.imgur.com/tcs25.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tcs25.png" alt="enter image description here"></a></p>
  
  <p>Can someone provide some insight as how to best go about this? I have all the data for now. Would I create a pipe or a filtering service, or have a form?</p>
  
  <p>** MODELS **</p>
  
  <p>An ProductConfigurationOption is an overall parent of an option choice. Ex. Fabric is an ConfigurationOption. </p>
  
  <p>A configuration-option-choice is a specific fabric such as Tan Chenille. A individual ConfigurationOptionChoice has many OptionChoiceProperties.</p>
  
  <p>product-configuration-option.ts</p>
  
  <pre><code>import { ProductConfigurationOptionChoice } from './product-configuration-option-choice';
  import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
  import { IProductConfigurationOptionChoice } from '../Interfaces/iproduct-configuration-option-choice';
  import { IProductConfigurationOption } from '../Interfaces/iproduct-configuration-option';
  
  export class ProductConfigurationOption implements IProductConfigurationOption {
     constructor(
          public ConfiguratorID: number,
          public OptionID: number,
          public OptionName: string,
          public OptionDescription: string,
          public OptionSortOrder: number,
          public SKUPartOrdinal: number,
          public ProductConfigurationOptionChoice: IProductConfigurationOptionChoice[],
          public OptionChoicesProperties: IProductConfiguratorOptionChoiceProperties[]
      ) {
  
      }
  }
  </code></pre>
  
  <p>product-configuration-option-choice.ts</p>
  
  <pre><code>import { ProductConfiguratorOptionChoiceProperties } from '../Models/product-configurator-option-choice-properties';
  import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
  import { IProductConfigurationOptionChoice } from '../Interfaces/iproduct-configuration-option-choice';
  export class ProductConfigurationOptionChoice implements IProductConfigurationOptionChoice {
      public OptionChoiceID: number;
      public OptionID: number;
      public OptionValue: string;
      public OptionChoiceName: string;
      public OptionChoiceDescription: string;
      public SKUPart: string;
      public ImageURL: string;
  
      public SortOrder: number;
      public PriceOffset: number;
      public OptionChoiceProperties: IProductConfiguratorOptionChoiceProperties[];
      constructor( ){
  
      }
  
       setOptionChoiceProperties(optionProperties: ProductConfiguratorOptionChoiceProperties[]) {
          this.OptionChoiceProperties = optionProperties;
      }
  }
  </code></pre>
  
  <p>product-configurator-option-choice-properties.ts</p>
  
  <pre><code>import { IProductConfiguratorOptionChoiceProperties } from '../Interfaces/iproduct-configurator-option-choice-properties';
  export class ProductConfiguratorOptionChoiceProperties implements IProductConfiguratorOptionChoiceProperties {
        constructor(
          public OptionChoiceId: number,
          public PropertyId: number,
          public Name: string,
          public Value: string
      ) {
  
      }
  }
  </code></pre>
  
  <p>Currently I am trying to get the OptionChoiceProperties and get the count of them and make them checkboxes. Then trying to figure out how to dynamically change the amounts OptionChoiceProperties when a filter is applied.</p>