Search code examples
angularangular-materialradio-buttonradio-groupgetvalue

Get values from radio buttons and create dynamic urls in Angular


I have two forms with radio buttons, what I need to do is to select an option from the first form and then go to the form 2 and select another option. Depending of the options selected I need to go to an Url, there are different urls for the different combinations of radio buttons selected. I attached an image of the prototype.

How can I get the values selected from the forms and then use a router with dynamic urls?

IMAGE PROTOTYPE

APP.COMPONENT.TS Parent Component

updateData(selection: any): void {
if (
  selection.optionForm === 'option1' &&
  selection.optionForm2 === 'option4'
) {
  // Go to this url
}
if (
  selection.optionForm === 'option2' &&
  selection.optionForm2 === 'option5'
) {
  // Go to a different url
}

}

STACKBLITZ


Solution

  • I have updated you Stackblitz a little to get you closer to your goal. You need to store the data from the first form in the parent, show the second once you have it, then do your conditional routing.

    Edited Stackblitz