When implementing ngIf conditions within a nested loop of the side menu in Angular 6, the collapse/expand CSS function does not seem to be functioning

this code dynamically binds a nested loop in the sidebar

 <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a *ngIf="menu1?.SubMenu && menu1.SubMenu?.length > 0" href="#"> <span class="fa fa-book"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
                      <a *ngIf="!menu1?.SubMenu || menu1.SubMenu?.length === 0" href="{{menu1.ActionUrl}}"><span class="fa fa-user"></span>  <span class="nav-label">{{menu1.DisplayText}}</span></a>

                    <ul  *ngIf="menu1?.SubMenu && menu1.SubMenu?.length > 0"  class="nav nav-second-level collapse" >

                         <li  *ngFor="let menu2 of menu1.SubMenu" > <!--level 02-->

                               <a *ngIf="menu2?.SubMenu && menu2.SubMenu?.length > 0" href="#"><span class="fa fa-book"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
                               <a *ngIf="!menu2?.SubMenu || menu2.SubMenu?.length === 0" href="{{menu2.ActionUrl}}"><span class="fa fa-book"></span> <span class="nav-label">{{menu2.DisplayText}}</span></a>


                                  <ul *ngIf="menu2?.SubMenu &&menu2.SubMenu?.length > 0"  class="nav nav-third-level collapse" >

                                       <li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
                                           <a *ngIf="menu3?.SubMenu && menu3.SubMenu?.length > 0" href="#"> <span class="fa fa-book"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
                                           <a *ngIf="!menu3?.SubMenu || menu3.SubMenu?.length === 0" href="{{menu3.ActionUrl}}"> <span class="fa fa-pencil"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
                                      </li>

                                  </ul>
                         </li>

                    </ul>
                </li>

        </ul>

Everything was working fine with the expand/collapse CSS before adding the ngIf condition. But now, it seems to have stopped working. Can someone assist me with this issue?

cssangularnested-loops

Answer №1

<ul class="nav metismenu" id="side-menu" [hidden]="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a [hidden]="menu1?.SubMenu && menu1.SubMenu?.length > 0" href="#"> <span class="fa {{menu1.CssClass}}"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
                      <a [hidden]="!menu1?.SubMenu || menu1.SubMenu?.length === 0" href="{{url}}{{menu1.ActionUrl}}"><span class="fa {{menu1.CssClass}}"></span>  <span class="nav-label">{{menu1.DisplayText}}</span></a>

                    <ul  [hidden]="menu1?.SubMenu && menu1.SubMenu?.length > 0"  class="nav nav-second-level collapse" >

                         <li  *ngFor="let menu2 of menu1.SubMenu" > <!--level 02-->

                               <a [hidden]="menu2?.SubMenu && menu2.SubMenu?.length > 0" href="#"><span class="fa {{menu2.CssClass}}"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
                               <a [hidden]="!menu2?.SubMenu || menu2.SubMenu?.length === 0" href="{{url}}{{menu2.ActionUrl}}"><span class="fa {{menu2.CssClass}}"></span> <span class="nav-label">{{menu2.DisplayText}}</span></a>


                                  <ul [hidden]="menu2?.SubMenu &&menu2.SubMenu?.length > 0"  class="nav nav-third-level collapse" >

                                       <li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
                                           <a [hidden]="menu3?.SubMenu && menu3.SubMenu?.length > 0" href="#"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
                                           <a [hidden]="!menu3?.SubMenu || menu3.SubMenu?.length === 0" href="{{url}}{{menu3.ActionUrl}}"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
                                      </li>

                                  </ul>
                         </li>

                    </ul>
                </li>

        </ul>

I encountered a similar issue in my own project. You could try using [hidden]="condition here" to see if it resolves the problem.

Answer №2

It might be beneficial to review the organization of your code. Instead of simply using the ngIf directive to remove elements from the DOM, consider implementing the ngClass directive for a more seamless expand/collapse functionality. This approach could potentially resolve the issues you are facing.

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

flexbox: Two vertical icons tightly aligned without any space

Hey everyone, I've been working on this layout: https://i.sstatic.net/4Aye0.png Here's what I tried so far: Resetting padding and margin in the <a href> and in the <img src...> HTML container <div> <div className="pe ...

htmlcssreactjsflexbox

Use various onChange functions for sliding toggle

I need assistance with a toggle app I'm developing that includes two slide toggles. Even though I have separate onChange() methods for each toggle, toggling one slide-toggle also changes the value of the other slide toggle. The toggle state is saved i ...

javascriptangulartypescriptangular-material

Troubleshooting problems with TranslateZ performance on mobile devices

While attempting to incorporate the code found at http://codepen.io/keithclark/pen/JycFw, I encountered significant flickering and delays in Chrome when using mobile devices. #slide1:before { background-image: url("http://lorempixel.com/output/abstract ...

htmlcssmobile

Mistake in the hovering positioning within the WordPress theme

I've encountered a hover issue on my website that I'm trying to resolve. Every time I hover over a product, the product description appears underneath it instead of on top, and I can't seem to find a solution: The site is using the sentient ...

csswordpress

Tips for implementing Angular 6 Route Authentication Guards on both Parent and Child Routes in all Routes

Exploring the Implementation of Angular 6 Route Auth Guards Across Root and Child Routes ...

javascriptangulartypescriptangular6angular-router

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

cssreactjs

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

htmlcssinternet-explorer

Guide on transitioning from @ngrx/store syntax version 2.2.1 to the latest version 6.1.2

Need help upgrading the syntax usage of @ngrx/store from version 2.2.1 to version 6.1.2 Upon recently upgrading my Angular project from Angular ^2.0.0 to Angular ^6.0.0 along with related npm plugins, I encountered issues with the usage of @ngrx/store and ...

angularngrx

I've tried using a ControlValueAccessor, but for some reason the value isn't getting passed to the form

Currently, I am experimenting with reactive forms in Angular, and I'm encountering difficulties with updating the form from custom components. As an example, take a look at the date-input component created using flatpickr in the linked Plunker demo. ...

angulartypescriptflatpickr

Full-screen background with image adhering perfectly - left-aligned button that stays in place

Excuse me if my question seems basic, as I am just starting out in front-end development and may not know all the necessary terms to fully understand existing questions. I currently have a simple html file that consists of a title and three buttons, with ...

jqueryhtmlcss

My goal is to generate a collection of fullwidth ion-cards using data from an array of objects

I am attempting to iterate through an array of objects in order to generate a set of cards, either FULLWIDTH or halfwidth with the last one centered if the count is an odd number. I have created a component that contains the card layout and I am using *ng ...

cssangularionic-framework

The process of adding new files to an event's index

I'm trying to attach a file to an event like this: event.target.files[0]=newFile; The error I'm getting is "Failed to set an indexed property on 'FileList': Index property setter is not supported." Is there an alternative solution fo ...

angularfiletypescript

Hover over the drop-down menu to enable tab on hover mode

Is it possible to make the tab switch to hover mode when I rollover the drop down sub-menu without using JavaScript, and only using CSS? <li id="anchor" class="title dropdown"><a href="#">Main Tab</a> <div class="co ...

htmlcss

Issue with Firefox hover effect not applying transform:scale

I'm experiencing some difficulties with the border colors when using transform:scale on my element. I want to find out if there is a known solution to this issue. Removing the scale animation resolves the problem and the borders return to normal. I ha ...

htmlcssfirefox

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Looking to streamline my headers in my Ionic 4 project by creating a separate reusable component for them. Here's how I set up my dashboard page with the header component: <ion-header> <app-header title="Dashboard"></app-he ...

javascriptangulartypescriptionic-framework

Seasonal selection tool

I need a quarterly date picker feature, ideally using Angular. I am interested in something similar to the example shown below: https://i.stack.imgur.com/9i0Cl.png It appears that neither Bootstrap nor (Angular) Material have this capability. Are there a ...

javascriptangular

Tips for maintaining color on <a> tags even after they have been clicked

My webpage has 3 <a> tag links to 3 different pages. I have set the hover state color to red, and now I want the background-color of the clicked page to remain as it was in the hover state. How can I achieve this? <html lang="en"> < ...

htmlcss

Can data be transmitted in Angular without using a selector?

I am facing a challenge in sending data from a child component to its parent. The parent component's HTML code does not utilize the child's selector, as it is within a dialog of Angular Material and only uses "MatDialogRef" and "dialog.open()". T ...

angulardata-binding

When setting a value through the DOM, the input's value bound with ngModel in Angular does not get updated

Trying to upload a file to calculate its hash and display it in an input box. If done correctly, the value should show in the form, but when submitting the form, the value does not get sent. Only adding a blank space by clicking on the input field works: ...

javascriptangularangular-ngmodel

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

I have set my navigation to dock at a specific document height on the top of the viewport, and when it docks, it should display a dropdown animation. $(document).scroll(function(){ var x = $(window).scrollTop(); if(x>=700){ $("header ...

javascriptjqueryhtmlcss