Send radio buttons values to parent component - Angular

userJ9sC 0
Viewed 30

I have a form with radio buttons from Angular Material inside a parent component, I need to get the values of the radio buttons, send them to the parent component and then show a different content depending of the radio button selected. I know that I need to use @output to send data to the parent component but my code is not working. Any ideas?

CODE

radio-button output angular-material angular
1 Answers

You have to emit from the child component the value from your form like:

@Output() formSubmitted = new EventEmitter<string>();

  submit(): void {
    console.log(this.form.value);
    this.formSubmitted.emit(this.form.value.seasonsForm!);
  }

And retrieve the value from the parent component like this:

HTML

  <app-child (formSubmitted)="editSeasonVisibility($event)"></app-child>

TS

  editSeasonVisibility(seasonSelected: string) {
    // Your logic to switch content
    console.log(`Selected season from parent`, seasonSelected);
  }

You can also see the official document Sharing data between child and parent directives and components

Shifenis0
Related