Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example:

{
  "data": [
    {
      "menu_name": "Primary Operations",
      "enabled": true,
      "sub-menu_location": null
    },
    {
      "menu_name": "Curated Games",
      "enabled": false,
      "sub-menu_location": null
    },
    {
      "menu_name": "Cricket",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "football",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "Hockey",
      "enabled": false,
      "sub-menu_location": "outdoor"
    }
  ]
}

javascripthtmlcssangular

Answer №1

Here are a few key points to consider:

  • The sample data provided in the query only seems to cater for a single sub-menu item.
  • It appears that Bootstrap may be the framework you are using based on the visuals.
  • Bootstrap does not inherently support dropdown sub-items, so I will refer to the code structure in this codepen example.

Possible Resolution

If you maintain the data object as a component property, the following template can serve as a starting point:

<li>
  <a class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
  <ul class="dropdown-menu multi-level">
    <li *ngFor="let menuItem of data" class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{menuItem.menu_name}}</a>
      <ul *ngIf="menuItem.sub-menu_location" class="dropdown-menu">
        <li><a href="#">{{menuItem.sub-menu_location}}</a></li>
      </ul>
    </li>
  </ul>
</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The React Native SearchBar is throwing an error: It is stating that the prop type `value` being passed to `ForwardRef(TextInput)` is invalid. The expected type is `string`, but

I'm completely lost with this error message. Everything was running smoothly a while back, and I haven't made any changes to this code. When I returned to this page recently, I was greeted with the following error: Failed prop type: Invalid prop ...

javascriptreactjsreact-native

Does width change based on position?

When I set position:absolute for an element, its width remains constant regardless of the text inside. However, if I set position:relative for the same element, the width will adjust based on the text content. I have created a fiddle with two menus, each ...

css

Steps for triggering an event based on a user-provided time input

I'm developing an AC controlling application that allows users to specify a time for all building AC units to be automatically turned off using HTML, jQuery, and CSS. I need to implement a feature where the system compares the user-entered time with t ...

jqueryhtmleventstime

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

htmlcssreactjstailwind-css

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Quoting information from the Next.js documentation: Attention: CSS-in-JS libraries that rely on runtime JavaScript are currently not compatible with Server Components. The following libraries are supported in Client Components within the app directory: s ...

javascriptreactjsnext.jsstyled-components

Uploading images using PHP and renaming them

I am in the process of creating a PHP code that will allow me to upload a file name to a database. My goal is to initially upload just the file name so that I can easily retrieve it later on. Below is the code snippet that I have been working on: HTML code ...

phphtmldatabaseuploadweb

The audio.play() HTML element fails to function in Chrome, preventing the audio from playing

I'm experiencing an issue with playing audio in Chrome when the audio.src is not called before the play call, but Firefox seems to handle it fine. Does anyone have any suggestions? You can check out the fiddle link below - http://jsfiddle.net/vn215r2 ...

javascriptangularjsgoogle-chromehtml5-audio

What is the process for generating a MediaWiki article that contains preloaded text derived from an HTML form input?

I am in the process of developing a private wiki using MediaWiki, and I have designed a Special page with HTML elements to serve as a template entry form. My goal is to create a new WikiPage based on the input provided by the user, following a similar s ...

phphtmlmediawikimediawiki-extensionsmediawiki-templates

HTML elements are positioned in alignment

I'm currently working on a website and I need some assistance in aligning my images properly. Here's what I have tried: However, I haven't been able to achieve the desired result with the following code: <img height="632" width="428" sr ...

htmlcssimagetwitter-bootstrapalignment

Angular: Unable to locate route declaration in the specified path /src/app/app-routing.module.ts

Whenever I attempt to set up automatic routing for components that have been created using the command below ng generate module orders --route orders --module app.module I encounter the following error message The requested URL /src/app/app-routing.mod ...

angulartypescript

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...

javascriptjquerypythondjangojson

Is there a way to establish a connection with a secondary Firestore database in Node.js, allowing for the use of multiple Firestore databases

I have set up multiple firestore databases within my project. Using the command line, I created these databases and can view them in the Firestore Databases preview by following the instructions outlined here: https://cloud.google.com/blog/products/databas ...

javascriptnode.jsfirebasegoogle-cloud-firestorefirebase-admin

I prefer to not have the box-shadow showing up on top of the navigation bar

Check out this cool demo: View Demo I am looking to add a shadow effect above the footer section, but not above the navigation bar. nav{ background-color: blue; height: 100px; } main{ box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.5); background- ...

htmlcss

Tips for refreshing a webpage after switching screens

// I have implemented the code below to navigate from one screen to another, specifically the Home page. However, I am facing issues with the page refreshing or reloading when navigating to the home screen. None of the lifecycle methods are being called, e ...

javascriptreactjsreact-nativereact-redux

What is the best way to use HTML5 canvas and JavaScript to crop an image offline?

While there are many online tools available to crop an image using JavaScript and PHP, the challenge arises when we want our app to function strictly offline without relying on server-side PHP scripting. In order to achieve this, we must turn to HTML5 ca ...

javascriptjquery-mobilegrailshtml5-canvascordova

Navigating through Node and Express on Azure App Service

I'm facing an issue that I am not sure if it is related to Node or Azure App Service, so here's the situation: In my Node/Express app, I have defined two routes: router.get("/users", checkAuthHeader, userController.getUsers); router.po ...

javascriptnode.jsazureexpressazure-appservice

Ways to determine if a user is using a PC using JavaScript

I am developing a website using node.js that will also serve as the foundation for a mobile app. The idea is to have users access the website on their phones and use it like an app. But I want to implement a feature that detects when the site is being vi ...

javascriptnode.js

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4

What is the reason behind jshint issuing an alert specifically for the lastSelectedRow being

Upon pasting the code below into jshint.com, an error is generated: Read only in reference to line: lastSelectedRow = 1; I am curious as to why this error occurs and how it can be remedied. Interestingly, jslint does not return this error. /*global la ...

javascriptjslintjshint

Uploading Files with Vuetify 2 v-file-input and AxiosIn this tutorial, we

After researching extensively on the topic, I reviewed questions such as file-upload-in-vuetify and vuetify-file-uploads, but unfortunately, the solutions provided did not work for me. My current challenge involves utilizing Vuetify 2's <v-file-in ...

javascriptvue.jsaxiosvuetify.js