html IF_04_03_Radio_Binding_HTML

Posted 2021-05-10

<ion-content padding>

    <ion-list>
        <ion-radio-group [(ngModel)]="superhero">
          <ion-list-header>
            Your Favorite Superhero
          </ion-list-header>
      
          <ion-item>
            <ion-label>Flash</ion-label>
            <ion-radio value="flash"></ion-radio>
          </ion-item>
      
          <ion-item>
            <ion-label>Batman</ion-label>
            <ion-radio value="batman"></ion-radio>
          </ion-item>
      
          <ion-item>
            <ion-label>Superman</ion-label>
            <ion-radio value="superman"></ion-radio>
          </ion-item>
      
          <ion-item>
            <ion-label>Wolverine</ion-label>
            <ion-radio value="wolverin"></ion-radio>
          </ion-item>
      
          <ion-item>
            <ion-label>Wonderwoman</ion-label>
            <ion-radio value="wonderwoman"></ion-radio>
          </ion-item>
        </ion-radio-group>
      </ion-list>

  <ion-button expand="block" fill="solid" (click)="displaySuperhero()">Say Hello</ion-button>
  
</ion-content>