Conceal a table if it has no content

I am dealing with 2 tables that contain various data sets.

img01

If both of my tables happen to be empty, I would prefer them to be hidden.

img02

Is it feasible to implement this in Angular? If you have a solution for me, I would be eager to give it a shot.

Here is the snippet of code:

file.html

<div class="row" > ;
   <div class="col-12">
      <div class="card mb-4">
         <div class="card-body">
            <div class="table-responsive">
               <table class="table table-striped">
                  <tr style="background-color: #f8f9fa;">
                     <td style="width: 13%;">Opening</td>
                     <td style="width: 13%;">Highest</td>
                     <td style="width: 13%;">Lowest</td>
                     <td style="width: 13%;">Last</td>
                     <td style="width: 15%;">Trend</td>
                     <td style="width: 6%;">    Time</td>
                     <td style="width: 15%;">Day volume</td>
                     <td style="width: 10%;">Last update</td>
                  </tr>
                  <tr *ngIf="statusLine.open != 0">
                     <td>
                        {{statusLine.open | number:'1.6-6'  }}
                     </td>
                     <td>
                        {{statusLine.high | number:'1.6-6'  }}
                     </td>
                     <td>
                        {{statusLine.low | number:'1.6-6'  }}
                     </td>
                     <td>
                        <span *ngIf="statusLine.tendancySign < 0" style="color: red;">
                        {{statusLine.close | number:'1.6-6'  }}
                        </span>
                        <span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
                        {{statusLine.close | number:'1.6-6'  }}
                        </span>
                     </td>
                     <td class="no-wrap">
                        <span *ngIf="statusLine.tendancySign < 0" style="color: red;">
                        <span
                           style="background:url(/assets/images/toto-online-sprites.png)  1px -834px no-repeat;position:relative;top:5px; display: inline-block;">&nbsp;&nbsp;&nbsp;</span> {{statusLine.tendancyPercent
                        | number:'1.2-2' }}
                        </span>
                        <span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
                        <span *ngIf="statusLine.tendancySign > 0"
                           style="background:url(/assets/images/toto-online-sprites.png) -296px -834px no-repeat;position: relative;top:5px; display: inline-block;">&nbsp;&nbsp;&nbsp;</span> {{statusLine.tendancyPercent
                        | number:'1.2-2' }}
                        </span>
                        &nbsp;%
                     </td>
                     <td>
                        {{statusLine.heure | getXFirstElements:'5'}}
                     </td>
                     <td>
                        {{statusLine.volume | number:'1.0'  }}
                     </td>
                     <td>
                        {{statusLine.update | getXFirstElements:'5'}}
                     </td>
                  </tr>
               </table>
            </div>
            <ng-container *ngIf="statusLinesII.length > 0">
               <div class="table-responsive">
                  <table class="table table-striped">
                     <tr style="background-color: #f8f9fa;">
                        <td style="width: 20%;" class="text-right">
                           <span> Number of buyers   </span>
                        </td>
                        <td style="width: 16%;" class="text-right">
                           <span> Bid size   </span>
                        </td>
                        <td style="width: 10%;" class="text-right">
                           <span> Limit bid  </span>
                        </td>
                        <td style="width: 6%;"> </td>
                        <td style="width: 10%;"> Limit ask </td>
                        <td style="width: 16%;" class="text-right">
                           <span> Quantity ask   </span>
                        </td>
                        <td style="width: 20%;" class="text-right">
                           <span>Number of sellers </span>
                        </td>
                     </tr>
                     <tr *ngFor="let line of statusLinesII">
                        <ng-container *ngIf="canShowLine(line)">
                           <td style="border: 0px;" class="text-right">
                              <span>
                              {{line.acheteurNumber  }}
                              </span>
                           </td>
                           <td style="border: 0px; text-align: right;">
                              <span>
                              {{line.acheteurQty  }}
                              </span>
                           </td>
                           <td style="border: 0px; text-align: right;">
                              <span>
                              {{line.acheteurCours | number:'1.6-6'  }}
                              </span>
                           </td>
                           <td style="border: 0px;text-align: right;">
                              <span>
                              {{line.vendeurCours | number:'1.6-6'  }}
                              </span>
                           </td>
                           <td style="border: 0px;text-align: right; ">
                              <span>
                              {{line.vendeurQty }}
                              </span>
                           </td>
                           <td style="border: 0px;" class="text-right">
                              <span>
                              {{line.vendeurNumber  }}
                              </span>
                           </td>
                        </ng-container>
                     </tr>
                  </table>
               </div>
            </ng-container>
         </div>
      </div>
   </div>
</div>

A thorough search on google did not yield any concrete solutions for my issue.

Your assistance is greatly appreciated!

angulartypescript

Answer №1

To implement conditional rendering in the first table, you have two options:

<div class="table-responsive" *ngIf="statusLine && statusLine.indexOf('open') !== -1">

Alternatively, you can assign a variable to Object.keys() method in the component and use it like this:

Html:
<div class="table-responsive" *ngIf="statusLine && objectKeys(statusLine).length > 0">

Ts:
objectKeys = Object.keys;

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

Exploring the functionalities of Angular components

I have encountered an issue while testing my class that relies on a single dependency, which is a service. Despite trying various methods such as using stubs, I am still facing the problem of an undefined method. https://i.stack.imgur.com/A3by2.png Testin ...

angulartestingkarma-jasmine

ag-grid Server Side pagination function to enable independent setting of last row

Currently, I am utilizing ag-grid, Angular 7, and implementing a server-side datasource with pagination. In my API setup, I initiate two requests: the first request provides the total number of items in the table, while the second fetches the data for the ...

javascriptangularag-grid

I'm new to NPM and Node.js and I'm currently exploring the differences between global and local dependencies installations, and how they are displayed in the package.json file

I'm primarily a designer who is diving into coding. Recently, I've been assisting with an Angular project at work and needed to learn how to utilize npm to install Angular CLI and its dependencies. Setting up my Angular project was a breeze. I m ...

node.jsangularnpmsass

exit out of React Dialog using a button

I have a scenario where I want to automatically open a dialog when the screen is visited, so I set the default state to true. To close the dialog, I created a custom button that, when clicked, should change the state to false. However, the dialog does no ...

javascriptreactjstypescriptdialogmaterial-ui

What is the best way to send headers to the ngx-logger's post method for a server URL?

We are currently considering the use of ngx-logger in Angular 4 for server logging. However, we have encountered an issue with passing headers along with the serverLoggingUrl. BrowserModule, HttpModule, LoggerModule.forRoot( { serverLoggingUrl: &ap ...

angularlogging

The function screen.getByText is not available in this context

My experience with jest and react-testing-library has been smooth for the most part, but I encountered some challenges when transitioning to the screen > getByText/etc testing method. Test describe('test the dashboard when loaded', () => { ...

javascripttypescriptjestjsreact-testing-library

Instructions on including the Web Animations API polyfill in an Angular 2 project generated using Angular CLI

The Angular 2 animation guide mentions the Web Animations API polyfill, which is recommended for browsers that do not support the native animations. What is the correct method to incorporate this polyfill into an Angular 2 project created with Angular CLI ...

angularangular-cli

Is it possible for me to create an HTML script that can transfer data from the script to a cell within Qubole?

Is it possible to create an HTML script that allows user interaction, pass the data back to a zeppelin cell, and trigger a rerun of the data? Thank you! Update: I have made some progress in rerunning the cell with an HTML click. The cell I want to rerun ...

htmlangularapache-zeppelinqubole

methods for displaying canvas in Angular 4

I recently began working with Angular4 and ng2 chart. My goal is to display text in the center of a doughnut chart within the canvas. While I am new to Angular4 canvas, I have been trying to achieve this but without success so far. Below is the setup in m ...

angularcanvasng2-chartsngx-charts

By implementing a custom function within the router's "redirectTo" method, we can dynamically determine the destination for redirection, effectively avoiding Ahead-of-Time (A

By implementing a function to decide where the user should be directed when the site loads, I encounter the following challenge: { path : '', redirectTo: redirector(), pathMatch: 'full' } The redirector() function returns a rout ...

angularangular2-routing

Improved with TypeScript 4.1: Fixed-Size String Literal Type

The latest updates from the TypeScript team have shown significant improvements in string literal typing (4.1 & 4.2). I'm curious if there's a way to define a fixed length string. For example: type LambdaServicePrefix = 'my-application- ...

stringtypescriptstring-literals

Guide to automatically closing the calendar once a date has been chosen using owl-date-time

Utilizing Angular Date Time Picker to invoke owl-date-time has been functioning flawlessly. However, one issue I have encountered is that the calendar does not automatically close after selecting a date. Instead, I am required to click outside of the cal ...

javascriptangulartypescript

Refining strings to enum keys in TypeScript

Is there a method to refine a string to match an enum key in TypeScript without needing to re-cast it? enum SupportedShapes { circle = 'circle', triangle = 'triangle', square = 'square', } declare const square: string; ...

typescript

Master Angular Autocompletion

Looking to add a filter autocomplete feature but unsure of how to implement it. Any assistance would be greatly appreciated! I've come across some examples, but they don't quite fit my needs. Here's the snippet of code: <mat-form-field c ...

htmlangulartypescriptautocompleteangular-material

"Is it possible to add an entire object to formData in one

I am looking to send both an image list and product data to an ASP.net api using formData. I have successfully sent the images, but now I am struggling with appending the entire object. I have come across some methods in JS like JSON.stringfy(object) or Ob ...

asp.netangulartypescript

What are the steps to launch a Firebase application without requiring user authentication?

I have a unique firebase app/game that does not require authentication. My main goal is to allow anyone to easily access the website or mobile app and start playing right away, without the need for user IDs. I have been receiving numerous emails from Fireb ...

angularfirebasefirebase-authenticationfirebase-security

The child object in Typescript is characterized by its strong typing system

Looking to convert plain AngularJS code to Typescript? Take a look at this example: app.someController = function ($scope) { // var $scope.Data = null; var $scope.Data: SomeCollection = null; I need to associate Data with scope and specify it as type ...

angularjstypescript

Building a Docker image encounters an issue during the npm install process

Trying to utilize Docker with an Angular application, encountering issues during npm install within the Docker build process. When running npm install locally, no dependency errors or warnings occur. Error log from docker build: > [node 4/6] RUN npm i ...

angulardockernginxnpm

When attempting to run the command 'ng serve', an error occurs stating "Permission denied"

This morning, I encountered a problem. When I try to run the angular project by using the 'ng serve' command, an error saying 'Access is denied' pops up. The same error occurs when running grunt commands as well. Any thoughts on how to ...

angulargruntjs

Using Angular to parse intricate JSON data

Need help parsing an http request in the following format: [ { "id": 1, "date": "2022-01-13T00:00:00.000+00:00", "time": "2022-01-13T21:21:21.000+00:00", "office&quo ...

arraysjsonangulartypescript