What is the best way to conceal an HTML label when no value is returned from the database for that particular label in an Angular 5 mobile application?

https://i.sstatic.net/CTSup.pngI have a table displaying various values in HTML format, like so:

Name : Arun Kumar

Phone(R) : 7604215454

 (M):             

Email: [email protected].

There are cases where certain labels are empty as there is no value for them in the database. I want to hide these labels if there's no corresponding value from the database and only display them when a value is returned. For example, in the context above, I would hide the label (M) if it has no value and only show it along with its value when there is one. Any help on how to solve this issue? I am new to Angular 5. Thank you!

Below is an example code snippet:

<table>
            <tr>
              <th style="font-weight:bold ; width: 30%;vertical-align: top;">Name</th>
              <br>
              <th style="font-weight:bold;">{{item.name}} </th>
            </tr>

            <tr>
              <th style="font-weight:bold;">Phone(R)</th>
              <br>
              <th style="font-weight:500;">{{item.mobile}}</th>
            </tr>
            <tr >
              <th style="font-weight:bold;text-align: right; padding-right: 8%">(M)</th>
              <br>
              <th style="font-weight:500;">{{item.phone}}</th>
            </tr>

Answer №1

To conceal the data, implement the ngIf directive.

<table>
            <tr>
              <th style="font-weight:bold ; width: 30%;vertical-align: top;">Name</th>
              <br>
              <th style="font-weight:bold;">{{item.name}} </th>
            </tr>

            <tr>
              <th style="font-weight:bold;">Phone(R)</th>
              <br>
              <th style="font-weight:500;">{{item.mobile}}</th>
            </tr>
            <tr *ngIf="item.phone" >
              <th style="font-weight:bold;text-align: right; padding-right: 8%" >(M)</th>
              <br>
              <th style="font-weight:500;">{{item.phone}}</th>
            </tr

Answer №2

To achieve this, you can utilize the ng-show directive like so:

<th ng-show="item.name" style="font-weight:bold;">{{item.name}} </th>

The behavior of ng-show is such that the element will only be visible if the expression within it evaluates to true. In this case, an empty string will evaluate to false, causing the entire element to be hidden.

For more information about ng-show, check out these helpful links: ng-show documentation

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

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

Why does the header not expand to 100% width when the viewport is resized, while the footer does?

I have been struggling to find a solution for a problem with my small website. The issue is that even though both my header and footer are set to width:100%, they do not stretch properly across the screen like I want them to. It's odd because everythi ...

The angular content is not scrolling

I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow ...

Having trouble adding a test card to the Google Pay testing environment and calculating the order total

How can I display the order total in GooglePay payment sheet? I could not find any documentation on this. Is it possible to do so? Even though I am using the TEST environment, I am unable to add any test card as mentioned in the URL provided below. Additio ...

The expression "routerlink" in Angular 9 is not recognized,

Currently, I am in the process of developing an Angular 9 application and have encountered two challenging issues. Firstly, as I navigate through the routes using the navbar, I notice an error message in the console stating "Syntax error, unrecognized exp ...

Looking to duplicate the elements with the click of a button?

I am in need of assistance with my registration form. My goal is to move the elements contained within the <fieldset> tags to the end of a row when the user clicks the + button. The result you see initially has been recreated. Thank you for your s ...

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Consider the following example where I only changed the CSS box-sizing property from content-box to border-box. The resulting output difference is significant. Give this code a try: .box1 { width: 300px; height: 100px; border: 1px solid blue; pa ...

Vertical centering menu adjustment

Can anyone help me with centering an image on my website? I've tried the following code: top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); You can see what's happening on my site here: ...

Steps for creating a div that appears on top of all other elements on a webpage

I have created a custom dropdown list with checkboxes from scratch because the project I am working on needs to be compatible with older versions of IE. Overall, the result is good but there is one issue - when I click on the drop down list, every other el ...

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

Determining the selection status of an HTML input

I have been working on a unique calculator that calculates the Body Mass Index of individuals. It performs well when I manually input the values, utilizing jQuery to execute the calculations. However, my goal is to enable users to enter values using numbe ...

If the width is below 767, the previous code will not be effective in jQuery

Challenge: How can I ensure that the code within the if statement only executes when the screen width exceeds 767px, and does not work if it is less than 767px? Using jQuery: $(document).ready(function() { $(window).resize(function() { if ($( ...

What is the best way to increase the height of a div up to a specific point before allowing it to scroll?

Is there a way to make a div expand to fit its contents up to 250px and then scroll if necessary? I attempted using the following CSS: text-overflow: ellipsis; max-height: 250px; overflow-y: scroll; However, this solution doesn't achieve the desired ...

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

Using React to open a (.json) file through a dialog box and access the contents

I'm struggling to understand how to load a local .json file and access its contents in order to store it in a 'state' variable. Here's the code I have so far: import React, { Component } from 'react' import Files from ' ...

Tips for utilizing mysql_connect(...) on a web hosting platform

Recently, I signed up for a web hosting service and have just started learning PHP and MySQL. I came across this video tutorial https://www.youtube.com/watch?v=gvGb5Z0yMFY which demonstrates how to add a row to a table. In my MySQL database, I have a table ...

Angular 2: Store all form inputs within a JSON object upon submission

I am working on a form that has multiple fields and I need to retrieve the data once it is submitted. This is the code in component.html : <div class="ui raised segment"> <h2 class="ui header">Demo Form: Sku</h2> <form #f="ngFor ...

Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows. According to the documentation (https://material-ui.com/api/table-row/), it s ...

Using jQuery to create animated effects for hidden input fields

The struggle to smoothly animate and fade in a hidden text field can be witnessed in this example. The goal is to seamlessly move all elements around the text field and button while fading in/out the hidden element. However, it appears that towards the en ...

Automatically displaying the navigation bar upon initial loading of the HTML page

Is there a way to adjust this code so that the side nav bar remains open when the page loads for the first time? I would like the side nav to be open by default. function openNav() { document.getElementById("mySidenav").style.width = "250px"; docum ...