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

``Is there a specific scenario where the use of getInitialProps is recommended when automatically redirecting from one

Within my application, I have set up an auto-redirect from the root directory '/' to '/PageOne' with the following code: const Home = () => { const router = useRouter(); useEffect(() => { router.push('/pageone', ...

reactjstypescriptnext.js

Creating a connection object for MySql2 in TypeScript within a class

I'm still a beginner when it comes to TypeScript, so I often stumble over simple things. Initially, I had no issues creating a database connection using the code snippet below that was not placed inside a class: const mysql = require('mysql2&apos ...

typescriptnode-mysql2

Angular application that features a material table created using *ngFor directive and displayedColumns defined as an array

I am trying to create a table that displays columns with the format {key: string, display: string} where 'display' is the header and 'key' is used to display the value. <ng-container *ngFor="let col of displayedColumns"> ...

angulartypescriptangular-material

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 ...

javascriptangulartypescriptrxjs

Attempting to eliminate any dates that have already occurred

I am faced with an array containing various dates in string format such as "2016-08-12". My goal is to eliminate any dates that have already passed by comparing them to today's date. I am using TypeScript for this task. Here is a snippet of my datoAr ...

javascripttypescript

Troubleshooting the display of API-generated lists in Angular 8

I am encountering an issue in Angular 8 when trying to display my list on a page. Below is the code from my proposal-component.ts file: import { Component, OnInit, Input } from "@angular/core"; import { ActivatedRoute, Params } from "@angular/router"; imp ...

javascriptangulartypescript

"Troubleshooting the issue of Angular's ng-selected not functioning properly within an edit

https://i.stack.imgur.com/ZpCmx.png https://i.stack.imgur.com/h3TA6.png TS Pincodes: Array<string> = []; Html <ng-select [items]="Pincodes" [searchable]="true" [multiple]="true" [(ngModel)]="updateZoneDetails ...

typescriptangular-ngselectangular16

There is no correlationId found within the realm of node.js

Currently, I am in the process of implementing correlationId functionality using express-correlation-id. I am diligently following the guidelines provided on this page: https://www.npmjs.com/package/express-correlation-id. I have successfully imported the ...

node.jstypescriptexpressmiddleware

What is the concept of NonNullable in typescript and how can it be understood

In TypeScript, the concept of NonNullable is defined as type NonNullable<T> = T extends null | undefined ? never : T For instance, type ExampleType = NonNullable<string | number | undefined>; Once evaluated, ExampleType simplifies to type Exa ...

typescript

Setting up APIGateway for CORS with the CDK: A Step-by-Step Guide

My API relies on AWS ApiGateway with an underlying AWS Lambda function provisioned through the CDK. The default CORS settings for the API are as follows: const api = new apiGateway.RestApi(this, "comments-api", { defaultCorsPreflightOptions: { ...

typescriptamazon-web-servicesaws-cloudformationaws-api-gatewayaws-cdk

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

As a newcomer to Angular2, I am currently developing a web application that requires three separate calls to a REST API. To test these calls, I decided to simulate the API responses by creating three JSON files with the necessary data. However, my implemen ...

javascriptjsonangulartypescript

Creating a variable within an ngFor loop

For my angular2 project, I need to display a matrix of workers and courses. Here's the current code I am using: <tr *ngFor="let worker of workers"> <td class="{{worker.fired ? 'fired-worker':''}}">{{worker.lastName ...

angular

Is it possible to define a namespaced external module in TypeScript?

Currently, I am dealing with some legacy js modules that are either namespaced on window or define'd if the page is using AMD. Here's an example: // foo/bar.js (function (root, factory) { if (typeof define === "function" && define.am ...

typescriptamd

Leveraging functionality from an imported module - NestJS

Currently, I am utilizing a service from a services module within the main scaffolded app controller in NestJS. Although it is functioning as expected - with helloWorldsService.message displaying the appropriate greeting in the @Get method - I can't ...

javascripttypescriptnestjs

In the Vercel production environment, when building Next.js getStaticPaths with URL parameters, the slashes are represented as %

I've encountered an issue while implementing a nextjs dynamic route for my static documentation page. Everything works perfectly in my local environment, and the code compiles successfully. However, when I try to access the production URL, it doesn&ap ...

javascriptreactjstypescriptnext.jsvercel

There was a problem locating the animation entry named "routeAnimation" within the app: [ERROR ->]<app></app>. This issue occurred at Directive e within the e_Host@0:0

I'm currently working on implementing animations during route changes. Here is my code snippet: @Component({ selector: 'app', encapsulation: ViewEncapsulation.None, styleUrls: [ './app.css' ], template: totTemplate, ...

animationangularangular2-routing

What is the best way to compare dates for a deadline using Angular and CSS?

Having recently delved into Angular 8, I just picked up on how to convert timestamps to strings using interpolation and .toMillis. However, I am looking to enhance this feature in my project app. I'm currently working on comparing the date saved in m ...

angularfirebasegoogle-cloud-firestore

Transferring data from a parent ng-template to a child ng-template

Is it possible to nest one ng-template inside another ng-template? If so, how can I pass data from the parent ng-template to its child ng-template? I have tried several methods, but none of them seem to work for me. <ng-template let-r="result" #rt&g ...

angular

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

Unable to implement client-side functionalities in Angular 17 with server-side rendering

view image description hereview image description here Is there a way to make my component run on the client side, similar to "use client" in Next.js? This is my first time working with server-side rendering in Angular, and everything works fine when it&a ...

angularserver-side-renderingangular-ssr