Ways to send a variable to ngIf

header.component.html

      <ng-container *ngFor="let headerMenu of headerMenus">
    <li *ngIf="headerMenu.ngif">
      <a (click)="onClick(headerMenu.menu)" [class]="headerMenu.menu">
        <img [src]="headerMenu.src" [alt]="headerMenu.menu">
        <p>{{ headerMenu.menu | uppercase }}</p>
      </a>
    </li>
  </ng-container>

headerMenu.service.ts

  public headerMenus: HeaderMenu[] = [
// menu, srcURL, ngif
new HeaderMenu('service', 'assets/img/service.png', true),
new HeaderMenu('pricing', 'assets/img/pricing.png', true),
new HeaderMenu('source', 'assets/img/source.png', true),
new HeaderMenu('about', 'assets/img/about.png', true),
new HeaderMenu('user', 'assets/img/user.png', 'isLoggedIn'),
new HeaderMenu('login', 'assets/img/login.png', 'isLoggedIn'),

];

I am attempting to pass the "isLoggedIn" variable to ngif as headerMenu.ngif. I expected "isLoggedIn" to function as a variable that could be toggled on and off depending on the login status.

However, it is being recognized as a string "isLoggedIn".

Is there a way for me to pass it as an actual variable?

javascriptangulartypescript

Answer №1

The issue lies in passing the string literal 'isLoggedIn'. Check your headerMenu.service.ts file to see where the new HeaderMenu is being declared. Is isLoggedIn a local variable, class variable, or where is it declared exactly? If it is a class member, you can access it as shown below:

new HeaderMenu('login', 'assets/img/login.png', this.isLoggedIn)

If isLoggedIn is coming from a dataservice injected into your class like so:

constructor(public dataService:DataService){}

You would access it like this:

new HeaderMenu('login', 'assets/img/login.png', dataService.isLoggedIn)

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

Preventing special characters, numbers, and spaces from being used as the first character in a word in HTML with regular expressions

Is there a way to restrict users from inputting special characters, numbers, and spaces only in the first place of a word using regex in HTML? <label><span>Current Carrier</span></label> <input name='Current Carrier' t ...

javascriptc#htmlcssregex

Image not found in next.js

Working Environment ・ next.js ・ typescript ・ styled-components I uploaded the image in the folder inside pages, but it is not showing up. Why is that? // package.json　　 { "name": "nextapp", "version": &qu ...

reactjstypescriptnext.jsstyled-components

Using jQuery to insert a div class with PHP referenced

My variable stores a color name. Here is an example: <?php $myvar = blueColour; ?> I want to apply this value to the body of an html page using jQuery: <script type="text/javascript"> jQuery(body).addClass("<?php echo $myvar; ?>"); < ...

javascriptphpjqueryhtmlwordpress

Having trouble retrieving alert message after submitting form using jquery

Trying to submit a form using jQuery, but when clicking on the submit button it displays a blank page. I understand that a blank page typically means the form has been submitted, but I want to show an alert() for testing purposes instead. However, it only ...

javascriptjqueryhtmlforms

Is it possible to dynamically update the data being sent along with a partial when rendering a Handlebars partial in a Node.js, MongoDB, Express application without the need to reload the entire webpage?

Is it possible to dynamically update data sent WITH THE PARTIAL view in a rendering scenario using hbs partial (nodejs, mogodb, express) without needing to reload the entire webpage? For example, if I have a post route for comments that queries the databa ...

javascriptnode.jsjsonhandlebars.js

Managing the verification of data existence in the ExpressJS service layer or controller

Working on a medium-sized website, I realized the importance of writing maintainable code with a better project structure. After stumbling upon this insightful article and some others discussing the benefits of 3-layer architecture, I found the concept qu ...

javascriptnode.jsexpress

javascript: extracting class name from HTML elements

To extract class names from an HTML code using JavaScript, I can utilize the following method: var cPattern = new RegExp(/class[ \t]*=[ \t]*"[^"]+"/g); var cMatches = data.match(cPattern); However, the above code returns an array with values li ...

javascriptnode.js

Creating a nested list component using an array of objects

Seeking guidance for a coding task I recently completed. I was tasked with creating a multiple nested list from an array of objects. While I achieved the expected result, my code ended up being overly complicated and not very clean. I used a combination of ...

javascriptreactjsarraysjson

Backstretch malfunctioning

Looking to enhance my webpage with a backstretch image slideshow effect using the body background, but encountering issues. The code I have included before the </head> tag is: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery ...

javascriptjqueryhtml

Working with Node.js and Redis: Managing multiple queries across various Redis databases using a single client connection

I'm new to Node.js and its asynchronous operations. My goal is to fetch data from different Redis databases. Here's a simple function I've created to retrieve a key from a Redis database: function get_key(client, key, db, callback) { i ...

javascriptnode.jsredis

Using the `forEach` method nested within another `forEach

I'm facing an issue with the useEffect hook where it seems to not be rendering correctly. My cardArticle is only concatenating the last array and that's it. Below is the code snippet: const [articles, setArticles] = useState([]); const [cardA ...

javascriptreactjsforeachuse-effectuse-state

What is the syntax for declaring a list of JSON objects in TypeScript?

I've been attempting to implement something similar to the following: interface IUser { addresses: JSON = []; } Unfortunately, it doesn't seem to be working! I'm looking to store a list of nested JSON objects inside the addresses field, ...

node.jsjsontypescriptlisttypeerror

Error: The method By.cssSelector is invalid and cannot be used

Currently utilizing npm's Selenium Webdriver. Having difficulty getting By.cssSelector to function properly. Other selectors like By.tagName and By.id are working fine. Here is the code snippet: var webdriver = require('selenium-webdriver&apos ...

javascriptnode.jsselenium

Tips on triggering an Angular 2 method once a jQuery promise has been resolved

I am currently incorporating the Third Party Library called MarvinJS into my Angular5 Application. In order to successfully handle a MarvinJS promise, I need to execute the method this.sharedService.openMarvinModal(false);. However, upon executing this me ...

angulartypescript

Navigating with React Router v6 beyond the confines of individual components

When using react-router v5, I would create the history object like this: import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); Then I would pass it to the Router like so: import { Router, Switch, Route, Link } from ...

javascriptreactjsreact-routerreact-router-dom

Instructions for implementing a "Load More" feature on blogs using either HTML or JavaScript

When retrieving blogs from a SQL Database, some of them tend to be lengthy. To tackle this issue, I plan on trimming each blog down to around 30 words (this amount may vary) and then incorporating a Load More link at the end. This link will enable users to ...

javascriptjqueryhtml

Unable to access UI application login through browser using SSH tunnel on Putty

After successfully setting up an SSH tunnel using putty from my local Windows to a remote Linux server, I was able to access localhost:8080 in my Chrome browser and confirm that the SSH tunnel is functioning as it displayed my UI from the remote machine. ...

javascriptreactjsputtyssh-tunnel

CSS - starting fresh with animations

I am facing an issue with a CSS animation that I created. Everything seems to be working correctly, but I need to complete it by setting the input type to reset the animation. Below is the CSS code snippet that should reset the animation: $('button& ...

javascriptjquerycssanimationreset

AngularJS ng-focus does not function properly with iframes

Why isn't ng-focus working with iframe in AngularJS? What am I missing? Take a look at my code: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <iframe src="example.com" tabindex="-1" ng-fo ...

javascriptangularjsiframefocuslistener

Unpacking the Mechanics of JavaScript Functions

My goal is to simplify my code by breaking it down into multiple files. A successful example of this is: socket.once("disconnect", disconnectSocket); Then I have a separate function named disconnectSocket that can access the socket object like this: con ...

javascriptnode.jsexpresssocketssocket.io