Show content depending on radio button selected - Angular

userJ9sC 0
Viewed 28

I have a form with radio buttons from Angular Material inside a parent component, I get the values of the radio buttons and send them to the parent component, that works fine, but I need to show a different content depending of what the user choose but not my code is not working. What can I do?

I tried with *ngIf but no success.

CODE

radio-button angular-material angular
1 Answers

try this

in your template:

<div [ngSwitch]="seasonSelected">
  <div *ngSwitchCase="'Winter'">content for winter</div>
  <div *ngSwitchCase="'Spring'">content for spring</div>
  <div *ngSwitchCase="'Summer'">content for summer</div>
  <div *ngSwitchCase="'Autumn'">content for autumn</div>
</div>

in your ts file:

@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample implements OnInit {
  seasonSelected = '';
  constructor() {}

  ngOnInit(): void {}

  editSeasonVisibility(seasonSelected: string) {
    this.seasonSelected = seasonSelected;

    alert(seasonSelected);
    //this.test = seasonSelected === 'Winter' ? 'ok' : 'noOk';
  }
}
Eli Porush0
Related