title: Angular 7 & Typescript - How can I check if dynamic required checkbox is checked in order to disable button
body: <p>If the required checkbox is true, I want to enable the button. 
  I have a file.reducer.ts file that has button and checkbox properties, file.component.html that loops through the checkbox and buttons, and file.component.ts where I want to check if the required checkbox is checked enable then enable the button. This is where I am not sure how to check for the correct checkbox and disable the button (<strong><em>event.target == requiredCheckbox</em></strong>).</p>
  
  <p><strong>file.component.html:</strong></p>
  
  <pre><code>      &lt;div *ngFor="let checkbox of checkboxes"&gt;
  
      &lt;label class="cui-overlay__checkbox-container"&gt;
        {{checkbox.content}}
        {{checkbox.required ? '(Required)' : '(Optional)'}}
  
        &lt;input type="checkbox" (change)="isChecked($event)"&gt;
  
        &lt;span class="cui-overlay__checkbox-check"&gt;&lt;/span&gt;
  
      &lt;/label&gt;
  
    &lt;/div&gt;
  
    &lt;ul
      [attr.data-stack]="stack"
      class="cui-overlay__buttons"&gt;
  
      &lt;li
        *ngFor="let button of buttons"
        class="cui-overlay__button"&gt;
  
        &lt;cui-button
          (buttonPress)="onPress($event)"
          [state]="button"
          [disabled]="button.disabled"&gt;
        &lt;/cui-button&gt;
  
      &lt;/li&gt;
  
    &lt;/ul&gt;
  </code></pre>
  
  <p><strong>file.component.ts:</strong></p>
  
  <pre><code>  get buttons() {
      return this.state.buttons
    }
  
    get checkboxes() {
      return this.state.checkboxes
    }
  
    get contents() {
      return this.state.contents
    }
  
    get stack() {
      return this.state.stack
    }
  
    get title() {
      return this.state.title
    }
  
    get visible() {
      return this.state.visible
    }
  
    onPress(button) {
      console.log(button.value)
    }
  
    isChecked(event) {
      var requiredCheckbox = this.state.checkboxes.find(checkbox =&gt; checkbox.required === true);
      console.log(requiredCheckbox);
      for (let button of this.state.buttons) {
        if (button.value === "Submit Application" &amp;&amp; event.target == requiredCheckbox) {
          button.disabled = false;
        }
      }
    }
  </code></pre>
  
  <p><strong>file.reducer.ts:</strong></p>
  
  <pre><code>    buttons: [
          {
            circle: false,
            icon: null,
            iconColor: 'primary-dark',
            shadow: true,
            text: 'Disabled Button Enabled once Required is checked',
            type: ButtonType.PRIMARY,
            value: 'Submit Application',
            disabled: true
          },
          {
            circle: false,
            icon: null,
            iconColor: 'primary-dark',
            shadow: true,
            text: 'Cancel',
            type: ButtonType.SECONDARY,
            value: 'Review Application',
            disabled: false
          }
        ],
        checkboxes: [
          {
            content: 'This checkbox is not required',
            required: false
          },
          {
            content: 'This is the required checkbox.',
            required: true
          }
        ],
  
  &lt;!-- end snippet --&gt;
  </code></pre>
  
  <p>Thanks!</p>