Question: I need a solution in Angular 12 [ { name: 'Salad', choices: [ { name: 'Santa Fe' }, { name: 'Greek' }, { name: 'Asian'
I need a solution in Angular 12


[ { name: 'Salad', choices: [ { name: 'Santa Fe' }, { name: 'Greek' }, { name: 'Asian' }, ], related: [ { name: 'Dressing', choices: [ { name: 'Italian' }, { name: 'Blue Cheese' }, { name: 'Ranch' }, ] }, { name: 'Bread', choices: [ { name: 'Italian' }, { name: 'Flat' }, { name: 'Sourdough' }, ] } ] }, { name: 'Entree', choices: [ { name: 'Steak' }, { name: 'Salmon' }, { name: 'Rice' }, ], related: [ ] }, { name: 'Soup', choices: [ { name: 'Minestrone' }, { name: 'Hot and sour' }, { name: 'Miso' }, ], related: [ { name: 'Bread', choices: [ { name: 'Breadsticks'} ] } ] } ]Develop a web page for a restaurant to show the menu list available at the restaurant. This page should be dynamic and should suggest various other available menu items as the user is picking a specific item. For example, let's say user is interested in having salad at restaurant. He is provided with various salad options and when the user chooses "Greek" salad option, we display her/him related other choices she/he might be interested (for example, Dressing or Bread, etc.). We also want to collapse the menu if the user unselects an item. For instance, let's say the user is interested in Salad and Soup but later decides against Salad. In that case, that option should be collapsed for better user experience (see Figure 5 and Figure 6 for the case the user unselects the Salad item and the menu item is collapsed). Example of desired user experience: Figure 2: the user selects Salad. The Salad menu expands automatically, and the user Figure 1: initial page selects Greek. The suggested options ("You might also want") are displayed after the user selected Greek Figure 3: the user selects Dressing. Dressing options are then displayed automatically, and the user selects Blue Cheese Restaurant Menu Restaurant Menu Restaurant Menu Salad Entree Soup Salad Santa Fe Greek Asian Salad Santa Fe Greek Asian You might also want: You might also want: Dressing Bread Entree Dressing Italian Blue Cheese Ranch Brend Entree Soup Soup Figure 5: the user selects Minestrone soup. The suggested options are then displayed after the Minestrone soup was selected. Figure 6: the user un selects the Salad. Then the Salad menu collapses. Figure 4: the user selects Soup and the soup options are displayed. Restaurant Menu Restaurant Menu Restaurant Menu Salad Santa Fe Greek Asian Salad Santa Fe Greek Asian Salad Entree Soup Minestrone Hot and sour Miso You might also want You might also want: You might also want Dressing Italian Blue Cheese Rauch Bread Entree Soup Minestrone Hot and sour Miso Dressing Italian Blue Cheese Ranch Bread Entree Bread Soup Minestrone Hot and sour Miso You might also want: Bread
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
