ipsos-components/src/demo-app/radio/radio-demo.html

Material Design components for Angular

<h1>Basic Example</h1>
<section class="demo-section">
  <mat-radio-button name="group1" checked>Option 1</mat-radio-button>
  <mat-radio-button name="group1">Option 2</mat-radio-button>
  <mat-radio-button name="group1" disabled="true">Option 3 (disabled)</mat-radio-button>
</section>

<h1>Color Example</h1>
<section class="demo-section">
  <mat-radio-button name="group2">Default (accent)</mat-radio-button>
  <mat-radio-button name="group2" color="primary">Primary</mat-radio-button>
  <mat-radio-button name="group2" color="accent">Accent</mat-radio-button>
  <mat-radio-button name="group2" color="warn">Warn</mat-radio-button>
</section>

<h1>Dynamic Example</h1>
<section class="demo-section">
  <div>
    <span>isDisabled: {{isDisabled}}</span>
    <button mat-raised-button (click)="isDisabled=!isDisabled" class="demo-button">
      Disable buttons
    </button>
  </div>
  <div>
    <span>isRequired: {{isRequired}}</span>
    <button mat-raised-button (click)="isRequired=!isRequired" class="demo-button">
      Require buttons
    </button>
  </div>
  <div>
    <span><mat-checkbox [(ngModel)]="isAlignEnd">Align end</mat-checkbox></span>
  </div>
  <mat-radio-group
    name="my_options"
    [disabled]="isDisabled"
    [required]="isRequired"
    [align]="isAlignEnd ? 'end' : 'start'">
    <mat-radio-button value="option_1">Option 1</mat-radio-button>
    <mat-radio-button value="option_2">Option 2</mat-radio-button>
    <mat-radio-button value="option_3">Option 3</mat-radio-button>
  </mat-radio-group>
</section>
<h1>Favorite Season Example</h1>
<h2>Dynamic Example with two-way data-binding</h2>
<section class="demo-section">
  <mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
    <mat-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
      {{season}}
    </mat-radio-button>
  </mat-radio-group>
  <p>Your favorite season is: {{favoriteSeason}}</p>
</section>