title: Dynamically selecting a radio button in Ionic 3
body: <p>I have some code that dynamically selects a radio button depending on the expression but the issue is that it sometimes selects two radio buttons of a radio-group list, the code for html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-row&gt;
              &lt;ion-col col-4 no-padding class="one"&gt;
                &lt;ion-item&gt;
                  &lt;ion-label&gt;
                    &lt;img src="assets/imgs/nearby/male.png"&gt; Male&lt;/ion-label&gt;
                  &lt;ion-radio [checked]="this.gender === 'Male'" value="Male" (ionSelect)="selectGender('Male')"&gt;&lt;/ion-radio&gt;
                &lt;/ion-item&gt;
              &lt;/ion-col&gt;
              &lt;ion-col col-5 no-padding class="two"&gt;
                &lt;ion-item&gt;
                  &lt;ion-label&gt;
                    &lt;img src="assets/imgs/nearby/female.png"&gt; Female&lt;/ion-label&gt;
                  &lt;ion-radio [checked]="this.gender === 'Female'" value="Female" (ionSelect)="selectGender('Female')"&gt;&lt;/ion-radio&gt;
                &lt;/ion-item&gt;
              &lt;/ion-col&gt;
              &lt;ion-col col-3 no-padding class="third"&gt;
                &lt;ion-item&gt;
                  &lt;ion-label&gt;
                    &lt;img src="assets/imgs/nearby/all-mf.png"&gt; All&lt;/ion-label&gt;
                  &lt;ion-radio [checked]="this.gender === 'all'" value="all" (ionSelect)="selectGender('all')"&gt;&lt;/ion-radio&gt;
                &lt;/ion-item&gt;
              &lt;/ion-col&gt;
            &lt;/ion-row&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The selectGender Methods in is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>selectGender(gender) {
      this.gender = '';
      this.gender = gender;
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a better way to achieve this? The search fields of which radio group is a part of and the search results are both part of the same page, and are being hidden and viewed on onSearchClicked() which is a method that alters a variable which control viewing and not viewing of elements.</p>
  
  <p>I want the radio button to be selected in sync with the value of gender variable in .ts file.</p>