title: Setting checkbox value based on a condition for dynamically generated input
body: <p>In my angular application I am trying to implement compare functionality between products. I have a list of products with a checkbox generated for each of them. Initially all the checkbox will be unchecked. When I click the checkbox of a product, I am checking if the total selected product to compare is not greater than 2. If it is greater than 2, the checkbox should become unchecked. I tried using the below code with no success. Any help on this is much appreciated. </p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div *ngFor="let att of displayProduct "&gt;
     {{att.productName}}
     &lt;input type="checkbox" name="att.productId" value="compare" 
     (change)="checkBoxClicked(att.productId)"
     [checked]= "test(att.productId)"&gt; Compare
   &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>compareList: string = [];
  checkBoxClicked(val: string){
      if (this.compareList.length&lt;2){
      this.compareList.push(val);
      }
      this.test(val);
  }
  test(val: string){
  if (_.find(this.compareList, function(data ){return data == val }) === undefined){
      return false;
      }
      else {
      return true;
      }
  }
  </code></pre>