The asynchronous Angular *ngIf directive with multiple conditions on the same level is not functioning as expected

I am currently in the process of refactoring my code

<ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'>

I encountered an issue with 

Unexpected token &&, expected identifier

Do you think it is necessary to separate this into a child ng-container HTML element? like below?

<ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'>
  <ng-container taskOutputs.outputs.length; else neverImportedOrLoading'>
  </ng-container>
</ng-container>

Edit

Trying it this way (adding ())

<ng-container *ngIf='(taskOutputs$ | async as taskOutputs) && taskOutputs.outputs.length; else neverImportedOrLoading'>

resulted in another error:

Missing expected ) at column 23 in [(taskOutputs$ | async as taskOutputs) && taskOutputs.outputs.length; else neverImportedOrLoading]
javascriptangulartypescript

Answer №1

I recommended utilizing two ng-containers for better organization.

<ng-container *ngIf='{tasks:taskOutputs$ | async} as data'>
   <ng-container *ngIf="data.tasks && data.tasks.length else neverImportedOrLoading">
        ...you should use data.tasks like this:
        <div *ngFor="let task of data.tasks">
             {{task.taskId}}
        </div>
   </ng-container>
</ng-container>

Note that the initial condition {task:taskOutputs$|async} will always be met.

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

All of the jstree add-ons are not working as expected

I've encountered a frustrating issue that I can't seem to find any documentation on. While I'm still relatively new to jQuery, my understanding is growing, but I'm completely unfamiliar with the jsTree plugin. The problem I'm faci ...

javascriptjqueryhtmlajaxjstree

Incorporating a checkbox option within a table

Hello, I am currently working on a PHP project and I have a question about adding checkboxes to a table to indicate selection. Since I couldn't find any existing answers on how to toggle checkboxes when clicking on a table row, I thought I'd shar ...

javascriptphpjqueryhtmlcss

"Angular Ionic combination for displaying lists with customized headers and footers on cards

My issue is fairly straightforward - I am looking to create a list card with item array from my controller. However, I am struggling with how to structure my data in the HTML. The list card should have a header, content, and footer. I have attempted variou ...

javascripthtmlcssangularjsionic-framework

Effortlessly stream a series of video files in consecutive order using HTML's <video> tag

Having experimented with various approaches: I attempted to utilize hidden video tags and toggle their visibility, but encountered flickering issues. Another strategy involved modifying the src attribute of the video. However, I found that I needed to ...

javascriptjqueryhtmlvideo

The `.babelrc` file is unable to locate presets within a nested node_modules directory

My file structure is organized as follows: > build > node_modules > webpack.config.js > .babelrc > .gitignore In my .babelrc file, the configuration appears like this: { "presets": ["es2015", "stage-0", "react"] } However, I ...

javascriptnpmwebpackbabeljs

Trouble connecting AngularJS controller to the view

I'm struggling to understand why the text I input in my controller isn't linking to the view. After creating two JavaScript files - app.js and MainController.js, things still aren't working as expected. Following a tutorial on Codecademy, ...

javascriptangularjsangularjs-scope

What is the best way to store various types of functions within a single object key?

I have a dilemma where I am storing values and individual typed functions in an array of objects. Whenever I loop through the array, all the types of all typed functions in the array are required for any value. How can I make this more specific? Check it ...

javascriptreactjstypescript

Change the size of window using jQuery

I have implemented a tooltip that can appear in two positions: top and bottom. I am trying to achieve this using jQuery resize function. The issue I am facing is that when the user resizes their browser window to less than 768px, the tooltip should appea ...

javascriptjqueryresize

I am running into issues while trying to complete the npm install process for Angular 2

I encountered an error in the command prompt: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34595d5a5d595540575c74061a041a0504">[email protected]</a>: To avoid a RegExp DoS issue, please up ...

node.jsangularnpm-install

The hamburger icon refuses to close even after being clicked once

Navigation Bar Component import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { logout } from '../../redux/actions/auth'; import './Navigati ...

javascripthtmlcssreactjs

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

On the backend side, I have a json file containing addresses. From the client side, I am receiving a user's address through an API post method. My goal is to verify if the address provided by the user already exists in the JSON file. The addresses in ...

javascriptjsonnode.js

Problem with Angular Material Tree icons' borders

Currently, I am utilizing the angular material tree component , but unfortunately I am facing an issue with removing the icon border as shown in this image: https://i.sstatic.net/p5QuU.png I have already imported MatIconModule import {MatIconModule} from & ...

angularangular-material

Retrieve recently appended DOM elements following the invocation of createComponent on a ViewContainerRef

I have a current function in my code that dynamically creates components and then generates a table of contents once the components are added to the DOM. This service retrieves all h3 elements from the DOM to include in the table of contents: generateDy ...

javascriptangulartypescriptdom

The dynamic concatenation of Tailwind classes is failing to have any effect, even though the full class name is being

I'm currently using Tailwind CSS within my Next.js project and I have a common method that dynamically returns the desired background color. However, despite adding the full class name, the background color is not displaying as expected. After reading ...

javascripttypescriptnext.jstailwind-css

Assistance with AJAX Reload Interval (Polling) Functionality

My project involves extracting small portions of text from multiple files (often just single words) and then applying a stylized script to them. Currently, everything is functioning correctly in terms of loading and displaying the text. However, since the ...

javascriptjqueryajaxpollingajax-polling

Ways to showcase the coordinate values on the surface of a 3D cube using three.js

I am currently working on developing a 3D cube using three.js, which rotates and translates continuously. At the moment, I am rotating the 3D cube using randomly generated numbers, but eventually, these numbers will be sourced from an accelerometer and gyr ...

javascripthtmlthree.js3d

Interested in leveraging string functions on the information retrieved from the API?

I am trying to utilize String functions such as slice(x,y), length() on the data received from the API. To achieve this, I first converted the data to a variable called mystr using JSON.stringify(obj), but encountered an issue where the console displayed: ...

javascriptjsonreactjsstringapi

Eliminating Old Markers Effortlessly with Leaflet

Here is some JavaScript code that allows for the creation of markers on a map when clicked, both locally and globally in real-time using node.js / socket.io. Everything works smoothly but there is an issue where each added marker remains visible. For refe ...

javascriptnode.jsleafletmapbox

After routing, parameters are mistakenly being inserted into the URL

When working with Angular 5 and using routing to move between pages / components, I am facing an issue. Specifically, in the login component, after signing out I navigate to the Home component but unnecessary parameters are being added to the URL. Below i ...

angular

Tips on updating pinned row information in AG Grid Vue

I have a specific row pinned to the bottom in the grid. Whenever I add or remove some rowData in the grid, I need to update that pinned row. Take a look at the code snippet below: this.gridApi.pinnedBottomRowData = rowNode.setDataValue(date, dataToPush); t ...

javascriptlaravelvue.jsag-grid