4

I am very new to angular 8 technology and have some problem setting one of the radio button checked by default.

I have tried to add some of these attributes [checked]="true", checked but problem is still the same.

HTML

<div class="form-check">
    <mat-radio-button type="radio" id="materialUnchecked" name="filterType" 
        value="0" [(ngModel)]="filterType" [checked]="true">
        By client
    </mat-radio-button>

    <mat-radio-button type="radio" id="materialChecked" name="filterType" 
        value="1" [(ngModel)]="filterType">
        By student
    </mat-radio-button>
    <br><br>
</div>

TS

protected filterType;

Any help would be appreciated. Thanks

frido
  • 13,065
  • 5
  • 42
  • 56
User569
  • 41
  • 1
  • 1
  • 2
  • 1
    Possible duplicate of [Angular 4 default radio button checked by default](https://stackoverflow.com/questions/43780840/angular-4-default-radio-button-checked-by-default) – DarkNeuron Jul 22 '19 at 15:02

2 Answers2

10

Set default value for a variable and use like below
Here I have used flag as the default variable

TS

 import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      name = 'Angular';
      flag: any;
      constructor() {
        this.flag = 0;
      }
    }

HTML

<input type="radio" name="1" id="1" class="with-gap" [(ngModel)]="flag" [value]="0">
<input type="radio" name="2" id="2" class="with-gap" [(ngModel)]="flag" [value]="1" >
{{flag}}

This is the stackblitz url

https://stackblitz.com/edit/angular-dyy5y8

RS17
  • 773
  • 1
  • 9
  • 23
3

set filterType value to true in your ngOnInit.

this.filterType=1;

Aastick
  • 91
  • 1
  • 1
  • 7