Tips for testing two conditions in Angular ngIf

I am facing a little issue trying to make this *ngIf statement work as expected. My goal is to display the div only if it is empty and the user viewing it is the owner. If the user is a guest and the div is empty, then it should not be shown. Here is my current attempt:

<div *ngIf="(tray.flyers.length === 0) && (isOwner === true)"></div>

This code will show the div when the user is the owner and the div is empty. However, I am unsure how to add a condition that will hide the div if the user is a guest and the div is empty.

I have been struggling with this issue for a few hours now and can't seem to find a solution. I know I could achieve this by handling everything in the component and using:

<div [hidden]="isTrayEmpty"></div>

But ideally, I would prefer to accomplish this directly in the HTML if possible. I'm not sure if it's even feasible though.

Any help or guidance you could provide would be greatly appreciated. Thank you!

angulartypescript

Answer №1

Here's the logic behind it: Display the div if either the tray is not empty or the user is the owner:

<div *ngIf="(tray.flyers.length > 0) || (isOwner === true)"></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

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

I am verifying the user's login status and directing them to the login page if they are not already logged in

My goal is to utilize ionViewWillEnter in order to verify if the user is logged in. If the check returns false, I want to direct them to the login page and then proceed with the initializeapp function. My experience with Angular and Ionic is still limite ...

angulartypescriptionic-frameworkionic2

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

Currently, I am facing an issue with using Angular2 Router.navigate as it is not functioning as expected. import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Router } from '@angular/ ...

javascriptangulartypescriptservicerouter

How to generate a new array in Angular by combining elements from two existing arrays for common items

I am currently working on a TypeScript function to compare two arrays and generate a third array containing the common items. For example: employees: any; offices: any; constructor() { this.employees = [ { fname: "John", lname: "James", sta ...

arraysangulartypescript

What is causing this error to appear during the npm install process in my Angular project?

I encountered an issue in my Angular 7 project recently. When running npm install, the following error occurred: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-pro ...

angularnpm

Firebase Error: Page Not Found

I recently set up an Angular2 application and added Firebase using npm. I successfully imported it into my app.component.ts without any errors showing up in my text editor. The package.json file also indicates that Firebase is installed correctly. However ...

javascriptangularfirebasenpm

Utilize an array of observables with the zip and read function

I'm struggling with putting an array of observables into Observable.zip. I need to create a function that reads values from this dynamically sized array, but I'm not sure how to go about it. Does anyone have any suggestions? import {Observable} ...

angulartypescriptrxjs

Finding the percentage scores for five different subjects among a class

As a beginner in TypeScript, I am still learning the ropes. Here is the code snippet I used to calculate percentage: pere() { this.E=(((+this.English+ +this.Tamil+ +this.Maths+ +this.Science+ +this.Social)/500)*100); console.log(this.E); The result w ...

typescript

Move the assets folder in Angular to Azure Storage

Looking to streamline my Angular application by transferring all the assets to Azure Storage. Rationale: The assets folder in my repository is cluttered with large, static files that never change. Since we are hosted on Azure, the plan is to move the ass ...

angularazure-blob-storage

Exported data in Vue3 components cannot be accessed inside the component itself

Essentially, I'm working on creating a dynamic array in Vue3. Each time a button is clicked, the length of the array should increase. Below is the code snippet. <div class="package-item" v-for="n in arraySize"></div> e ...

typescriptvue.jsvuejs3

Is there a way to retrieve the status_code 400 in Angular?

How can I determine if the status code equals 400 in Angular to display a notification? I attempted the following method: signUp() { let body = { login: this.username, nom: this.nom, prenom: this.prenom, adress: thi ...

angular

Angular 7 automatically updates array values with the most recent values, replacing any previous values in the process

Currently, I'm working with arrays and utilizing the map function to modify the data. Below is an array of icons: private socialIcons:any[] = [ {"icon":"thumbs-up","operation":"like"}, {"icon":"thumbs-down","operation":"unlike"}, {" ...

angularangular7

Transferring data from a child to a parent component in Angular 2 using a combination of reactive and template-driven approaches

Recently delving into Angular 2 ( and Angular overall ) , I found myself at a crossroads with my co-worker. He opted for the template-driven method while I leaned towards the reactive-driven approach. We both built components, with his being a search produ ...

angulartypescriptangularjs-directiveangularjs-scopecomponents

Possibility for Automatic Type Inference in Generics

Is there a way to have a method infer the type of function parameter without specifying its generic? Currently it is 'GET' | 'POST', but I only need the literal 'GET' const func = <Params, Method extends "GET" | & ...

typescript

Using require() instead of import in Strip-Ansi leads to an exception being generated

Encountering an issue with my Angular 13 project when attempting to serve it, I am faced with the following error: An unhandled exception occurred: require() of ES Module C:\Users\username\Documents\project\builds\Production ...

angularnpmnode-modules

Using ternary operator to set multiple variables in setState

Conditional Operator for Setting State in React I am wondering if there is a way to set the state with a variable that holds the correct state value using setState method. interface state { isfiltered: array<boolean> } this.setState({ ...

reactjstypescript

What is the method for nesting data within a component's child>child>child structure?

In the structure I am working with, there is a hierarchy: Root component buttons (menu search component) - an input field for searching Widgets (widget component ) (Cats widget) - displays what is input in the menu search here. My challen ...

javascriptangular

While attempting to index a nested object, TypeScript (error code 7053) may display a message stating that an element implicitly carries the 'any' type due to the inability to use an expression of type X to index type

I'm encountering an issue in TypeScript where I get the error (7053): Element implicitly has an 'any' type because expression of type X can't be used to index type Y when trying to index a nested object. TypeScript seems to struggle wit ...

typescript

Link a YAML file with interfaces in JavaScript

I'm currently learning JavaScript and need to convert a YAML file to an Interface in JavaScript. Here is an example of the YAML file: - provider_name: SEA-AD consortiumn_name: SEA-AD defaults: thumbnail Donors: - id: "https://portal.brain ...

javascriptnode.jstypescriptyaml

Error in Firebase Functions: Promises must be properly managed

Currently, I am in the process of creating a Firebase function using TypeScript to deliver push notifications to multiple users. However, whenever I execute the command firebase deploy --only functions, TSLint flags an error stating "Promises must be han ...

typescriptfirebasegoogle-cloud-functionstslint