title: Change boolean on (change) event
body: <p>I am trying to use a boolean to detect whether a radio button in a form has been checked or not.</p>
  
  <p><strong>(I left out unneccessary code for both HTML and TS files)</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;mat-radio-button (change)="toggleEditable($event)" value="overdraft"&gt;Overdraft&lt;/mat-radio-button&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>overdraft = false;
  
  toggleEditable(event) {
    if ( event.target.checked ) {
      this.overdraft = true;
    }
  }
  </code></pre>
  
  <p>The event is not fired, because when I try to click the radio button and submit the form, <code>overdraft</code> is not set to true. <strong>HOWEVER</strong>, if I use a <code>(click)</code> event instead of <code>(change)</code>, it works fine, <strong>BUT</strong> <code>(click)</code> events come with the disadvantage that you have to double-click the radio-buttons for the visual selection to appear, and thus I feel it a neccessity to use <code>(change)</code> (see more here: <a href="https://stackoverflow.com/questions/50067083/mat-checkbox-does-not-check-if-condition-is-false-only-on-double-click/50067108#comment102969092_50067108">mat-checkbox does not check if condition is false (only on double click)</a>).</p>
  
  <p>How do I solve this issue, so that when I click the radio-button, my <code>(change)</code> event is fired and <code>overdraft</code> is set to true without using the <code>(click)</code>-events that come with UI-issues?</p>
  
  <p><strong>SOLUTION</strong>:</p>
  
  <p>If you want to fetch the actual value of the <code>mat-radio-button</code>, you will need to make the following changes:</p>
  
  <p>1) Instead of using <code>[value]="overdraft"</code> in HTML, use <code>value</code> without square brackets, such as this:
  <code>&lt;mat-radio-button value="overdraft"&gt;Overdraft&lt;/mat-radio-button&gt;</code></p>
  
  <p>2) In your TypeScript code, you can now access the value property from HTML:</p>
  
  <pre><code>valueChanged(event: MatRadioChange) {
    console.log(event.value); //will log the value for the button you clicked
  }
  </code></pre>