Angular 6's observable variable doesn't properly support Ng If functionality

I successfully implemented server-side pagination in the Angular6 material data grid following the instructions from this link.

Now, I am facing an issue where I want to display a "No Data Found" message if the response dataset is empty. I tried using ngIf with the totalCount variable, which is an Observable, but it doesn't seem to work as expected.


  private totalCountSubject = new BehaviorSubject([]);
  public totalCount$ = this.totalCountSubject.asObservable();
  this.totalCountSubject.next([body.data.count]);

  // View
  {{dataSource.totalCount$}} <!-- This displays either 0 or the count of rows -->

   <!-- This ngIf block does not work as intended. --->
   <span *ngIf="(dataSource.totalCount$ | async) === 0 ">
     NO DATA FOUND!!!!
   </span>

Does anyone have any insight into why ngIf is not functioning properly in this scenario?

angulartypescriptangular-material2

Answer №1

Solution to the problem involves using nested ngIf directives

<ng-container *ngIf="dataSource.totalCount$ | async as totalCount">  
   <span *ngIf="totalCount == 0 ">
     DISPLAY MESSAGE: NO DATA FOUND!!!!
   </span>

<ng-container>

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

Ways to specify a setter for a current object property in JavaScript

Looking to define a setter for an existing object property in JavaScript ES6? Currently, the value is directly assigned as true, but I'm interested in achieving the same using a setter. Here's a snippet of HTML: <form #Form="ngForm" novalida ...

javascripttypescriptecmascript-6

Having difficulty deploying a Dockerized production build of an Angular 17 website

Attempting to deploy a website built with Angular 17 (node 18) using Docker and Docker Compose Below is the contents of the Docker file: FROM node:18-alpine as build WORKDIR /app RUN npm i -g @angular/cli COPY package*.json ./ RUN npm ci COPY . ./ RUN ng ...

angulardocker

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

For my Angular 10 application, I created a service to facilitate communication between components: export class CommunicationService { private messageSubject = new Subject<Message>(); sendMessage(code: MessageCode, data?: any) { this.messag ...

angulartypescriptrxjsangular10

Navigating through errors in my Dockerfile while running Angular

As a complete novice in the world of Docker (although quite comfortable with the rest of my tech stack), I followed along with the Docker guide and ended up with this Dockerfile: FROM angular/ngcontainer:latest WORKDIR /ClientApp COPY . . RUN npm install - ...

angulardockernpmdockerfile

Extract the value from an array of objects

https://i.sstatic.net/fTShc.png Having some difficulty accessing the elements of an array. In order to assign a project name to a local variable projectName, I am seeking assistance with extracting the project name from the given JSON structure. Any hel ...

arraysangulartypescript

Angular2: Implementing a nested subscription with a secondary subscription within a loop

I am still discovering the world of Angular2, just a week into it! Currently dealing with 2 API calls in my project. The initial API call fetches an array (queryResults) of JSON objects. (1st Subscribe) Showcasing that array in the view. Iterating throu ...

angularhttprequestangular2-observablesangular2-http

Startling error: Our node server.js running into an unexpected token

I'm attempting to follow the Angular Universal quickstart, but I encountered an error when running "node server.js". Emily's-MBP:vepo Emily$ node server.js /Users/Emily/Development/vepo/server.js:3 import 'angular2-universal/polyfills&apos ...

node.jsangularangular-universal

Button for saving content located in expo-router header

I am a beginner in react native and I am attempting to connect a save button in a modal header using expo-router. I have managed to make the button work within the modal itself, but I would like it to be located in the header set by expo-router. It doesn&a ...

typescriptreact-nativeexporeact-hook-formexpo-router

Adding a timestamp to an array in Angular/Typescript services

I've been struggling with adding a timestamp OnInnit to track the time a user visited a page. I want to include the timestamp in an array within my services, but I keep encountering errors and can't seem to figure it out on my own. Any assistance ...

arraysangulartypescriptservicetimestamp

Adding fresh 'observers' to a list of 'observers' while the application is running and monitoring updates by utilizing combineLatest in Angular

In my current scenario, I am facing a challenge of managing a list of observables that are constantly being updated by adding new observables to it during the application's runtime. Within this list, I am using combineLatest to perform API calls wit ...

angularrxjs

Create a pipeable stream that does not trigger any events when data is piped

I have been trying to utilize the renderToPipeableStream function from React18, and although it is functional, I am struggling with handling the pipe properly. The key section of my code involves an array of strings representing HTML. I am splitting the s ...

reactjstypescriptexpresspipeserver-side-rendering

Exclude the initial argument from functions listed within a JSON structure

Is there a way to create a generic type that reflects a JSON object structure, but excludes the first argument from functions while maintaining the types of other arguments? type InputType<T> = { increment: (state: T) => T, add: (state: T, cou ...

typescript

Encountered numerous issues while attempting to execute the npm install -g angular-cli command

I encountered several errors while attempting to run the command npm install -g angular-cli on my Windows 10 64-bit system. Here's a look at the log: npm ERR! git clone --template=C:\Users\ben\AppData\Roaming\npm-cache\_ ...

angularnpmangular-cli

Tips for implementing ID enforcement on downgraded Angular 2+ component

Currently in the process of transitioning AngularJS 1.6 components to Angular 4.3.2, I encountered a need to implement an id attribute on the component tag. However, in order to integrate ng2+ with existing ng1 components, downgrading is required: angular ...

angularmigration

The output from Angular Validator.pattern() may differ from that generated by online regex engines

Currently, I am facing an issue with my form group and a regular expression used to validate names. The criteria for the name input field are: It must be required. It should be alphanumeric. It must start with alphabets. It cannot contain any special char ...

angularregex

I seem to be stuck in an endless cycle with React hooks and I can't figure out the root cause

Explore the example here: https://codesandbox.io/s/wandering-wildflower-764w4 Essentially, my goal is to achieve the following: In the provided example, I have a server validation function that has been mocked. My objective is to maintain the state local ...

reactjstypescript

The moduleId in "Ng2SliderComponent" must be a valid string

My angularcli.json configuration looks like this: "scripts": [ "../node_modules/ng2-slider-component/ng2-slider.component.js", "../node_modules/ng2-slideable-directive/slideable.directive.js", "../node_modules/ng2-styled-directiv ...

javascriptangular

Transformation of Python code into Blockly blocks

As the founder of edublocks.org, I am interested in adding Python to Blocks functionality on the platform. At the moment, users can only transition from Blocks to Python. Is there anyone who has experience with this and can provide guidance on how to achi ...

pythontypescriptblockly

Exploring Cross-Origin Resource Sharing in ASP.NET Core 2.1 and Angular: A Comprehensive Guide

There has been an abundance of discussions surrounding this topic, but I've yet to find a solution that works for me. My setup includes an asp.net core API 2.1 with an Angular 7 app. Error: "fleet:1 Access to XMLHttpRequest at 'https://loca ...

angularasp.net-core

Is it possible to expand or merge Nestjs decorators?

My custom decorator named "User" is quite simple: export const User: () => ParameterDecorator = createParamDecorator( (data: any, req): UserIdentity => { const user = getUser(req); return user; }, ); Now, I'm in need of validating ...

node.jstypescriptdecoratornestjs