Having some issues with ng-hide in angular, it doesn't seem to be functioning properly

<nav class="menu-nav">
        <ul>
          <li class="menu-li" ng-model="myVar"><a>Discover<i class="fa fa-chevron-down pull-right"></i></a>
          <div class="sub-menu" ng-hide="myVar">
            <ul>
              <li><a>Discover-sub1</a></li>
              <li><a>Discover-sub2</a></li>
              <li><a>Discover-sub3</a></li>
              <li><a>Discover-sub4</a></li>
            </ul>
          </div>
          </li>
          <li class="menu-li"><a>Main<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Profile<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Join Now<i class="fa fa-chevron-down pull-right"></i></a></li>
          <li class="menu-li"><a>Sign In<i class="fa fa-chevron-down pull-right"></i></a></li>
           </ul>
      </nav>

Answer №1

In Angular 2+, the ng-hide feature is not available. Instead, you can utilize the *ngIf directive to hide and show elements.

For example:

TypeScript -

isLoading = true // Change the value as needed

HTML -

<div *ngIf="isLoading">Loading... </div>

I hope this explanation proves helpful!

Answer №2

If you're working with Angular2+ instead of AngularJS, it's important to note that: ng-hide is a directive in AngularJS and cannot be used in Angular2+. Instead, you can utilize *ngIf to conditionally render DOM elements or use [hidden] as an equivalent to ng-show in AngularJS when you want the element to be rendered but not displayed.

In your scenario, you can create a property in your .ts file:

 public loading: boolean = false;  // Update this property when necessary...

Then, in your .html template:

<div class="sub-menu" *ngIf="loading">
  <ul>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
    <li><a>Search-sub</a></li>
  </ul>
</div>

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

Angular - Enhancing the page with valuable information

Recently, I've been developing an Angular application that is designed to function as a digital magazine. This app will feature articles, news, reviews, and more. Along with this functionality, I am looking to include an admin panel where I can easily ...

AngularJS select box plugin exclusive to use

Which select box for Angular is recommended without relying on jQuery? I have come across many select boxes using jQuery, but this time I am working solely with Angular. Appreciate the insight! ...

TypeScript: Unable to fetch the property type from a different type

Currently, I'm using create-react-app with its TypeScript template. However, I encountered an issue while attempting to retrieve the type of the property 'pending' in 'GenericAsyncThunk', similar to how it's done in the redux- ...

Discovering browser back button press event utilizing Angular

Can we identify when a user has navigated to a page using the browser's history back button? I am looking for a solution in angular.js without relying on angular routing. Additionally, it should also detect if a user returns to a form after submitting ...

Utilize Ngrx to keep an eye on specific items within the store

If we consider an interface called INotification: export interface INotification { id: number; DateReceived: number; Title: string; Message: string; Tipology: string; isRead: number; } and a reducer system. In the component, it&ap ...

Having Trouble with Ionic 2's Loading Controller

In my attempt to utilize the recently added LoadingController in this scenario: let loading=this.load.create({ content: "Connexion au serveur Migal en cours..." }); loading.present(); this.http.get(this.urlCheckerForm.value.migalUrl+'/action/Mobi ...

Angular Sending JSON Data via POST Request

Whenever I submit an empty form through my Angular application, the JSON being sent is as follows: {foo: {}} This causes a 500 error to occur on my server instead of the expected 422 error, since the server requires the following structure: {foo: {bar: ...

Exploring the incorporation of interfaces into Vue.js/Typescript for variables. Tips?

I have an interface:   export interface TaskInterface{ name: string description1: string time: string } and a component import { TaskInterface } from '@/types/task.interface' data () { return { tasks: [ { name: 'Create ...

Retrieve a type from a Union by matching a string property

Looking at the following structure: type Invitation = | { __typename?: 'ClientInvitation' email: string hash: string organizationName: string } | { __typename?: 'ExpertInvitation' email: strin ...

Angular.js encountered an error with the Injector.modulerr function

I'm facing an issue with my node-jade-angular application: layout.jade doctype html html(ng-app='listApp') head title= title script(src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js') ...

AngularJS HTTP request not functioning properly with duplicate requests in Postman

My postman request is working fine, but the equivalent in angularJS isn't. I'm able to get the response I need in Postman, but for some reason, it's not working in Angular. var settings = { "async": true, "crossDomain": true, ...

Utilizing RxJS finalize in Angular to control the frequency of user clicks

Can someone provide guidance on using rxjs finalized in angular to prevent users from clicking the save button multiple times and sending multiple requests? When a button click triggers a call in our form, some users still tend to double-click, leading to ...

Error: Loki cannot be used as a constructor

Can anyone assist me in understanding why this code is not functioning correctly? Here's what my index.ts file in Hapi.js looks like: import { Server, Request, ResponseToolkit } from '@hapi/hapi'; import * as Loki from 'lokijs'; ...

There was an issue attempting to differentiate '[object Object]'. The Angular API Get Request from .Net only allows for arrays and iterables to be used

I am currently in the learning stage and consider myself a novice, so please forgive me if this question seems silly. I am working on a Movie Database project that involves integrating movies from a live API, creating a favorite list, implementing JWT auth ...

Assigning string properties to different types

I have numerous data types, each with a common property called dataType, and I am currently mapping each one to that specific value: interface GroupData { dataType: "group"; name: string; people: PersonData[]; } interface PersonData ...

The 'localstorage' object is not defined in NextJS 14, make sure to use 'client' in server-side execution

While setting up the Tailwind context for a Next.js 14 website, I encountered an issue with configuring a global theme for my project. Despite creating the ThemeContext and adding 'use client' at the beginning of the file, it still caused an erro ...

The error message "Cannot read property '$scope' of undefined" indicates that there is an issue

After receiving HTML content in an Angular app, I inject it into the HTML document but struggle to retrieve it. For example, you can see a minimized code on plunker here and in JavaScript here Below is my controller: class ReadCtrl constructor: (@$sco ...

Precise coordination of a singular model through the use of angularFireCollection

I am currently using version 0.3.0 of angularFire in order to connect an AngularJS application to Firebase. My goal is to achieve explicit synchronization of a single model on an edit form. After referring to the documentation, I attempted to utilize angu ...

Angular UI Bootstrap collapse directive fails to trigger expandDone() function

I am currently utilizing UI Bootstrap for Angular in one of my projects, and I have developed a directive that encapsulates the collapse functionality from UI Bootstrap. Here is how it looks: app.directive( 'arSection', ['$timeout', fu ...

"Troubleshooting issue with AngularJS ng-repeat order by functionality based on

I am currently trying to sort my ng-repeat by descending date order, with the newest items appearing first. Despite my efforts, I have been unable to achieve this. I have carefully checked for any errors in quoting, but still no luck. I've attempted ...