What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

Question

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this content still appear. I would appreciate any assistance in fixing this issue.

HTML:

<div class=content>
 <div class=data-item *ngFor="let item of dataSource">
  <div *ngIf="item.Value != ''" >
   <div>{{item.Header}}</div>
   <div>{{item.Value}}</div>
  </div>
 </div>
</div>

CSS:

.content {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.data-item{
flex: 0 0 21%;
border-style: solid;
}

TS:

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

  dataSource: items[] = [
    {Header: 'Header A1', Value: 123},
    {Header: 'Header B2', Value: 234},
    {Header: 'Header C3', Value: ''},
    {Header: 'Header D4', Value: 456},
    {Header: 'Header E5', Value: ''},
    {Header: 'Header F6', Value: 678},
    {Header: 'Header G7', Value: 789},
  ]
}

export interface items{
  Header: string;
  Value: any;
}

Check out the screenshot of the final rendered HTML: Rendered HTML

html css arrays angular typescript

Answer 1

Answer №1

To eliminate the need for an extra div, utilize ng-container and apply a CSS class to the original div used with *ngIf

Sample HTML

<div class=content>
<ng-container  *ngFor="let item of dataSource">
 <div *ngIf="item.Value != ''" class=data-item>
  <div>{{item.Header}}</div>
  <div>{{item.Value}}</div>
 </div>
</ng-container>
</div>

Check out this stackblitz example

Answer 2

To eliminate the need for an extra div, utilize ng-container and apply a CSS class to the original div used with *ngIf

Sample HTML

<div class=content>
<ng-container  *ngFor="let item of dataSource">
 <div *ngIf="item.Value != ''" class=data-item>
  <div>{{item.Header}}</div>
  <div>{{item.Value}}</div>
 </div>
</ng-container>
</div>

Check out this stackblitz example

Answer 3

Answer №2

The issue lies in your *ngFor's creation of the item.

You can't use an *ngIf to prevent the display of these items because an element cannot have both attributes simultaneously.

To resolve this dilemma, you must narrow down dataSource to include only the desired items for display.

There are several methods to achieve this, but I recommend utilizing a pipe.

@Pipe({
  name: 'filterOutEmptyData',
})
export class FilterOutEmptyDataPipe implements PipeTransform {
  transform(
    input: items[]
  ): items[] {
    return input?.filter(item => item.Value !== '');
  }
}

After that, in your HTML template,

<div class=data-item *ngFor="let item of (dataSource | filterOutEmptyData)">

Remember to include the pipe in your module as well.

Answer 4

The issue lies in your *ngFor's creation of the item.

You can't use an *ngIf to prevent the display of these items because an element cannot have both attributes simultaneously.

To resolve this dilemma, you must narrow down dataSource to include only the desired items for display.

There are several methods to achieve this, but I recommend utilizing a pipe.

@Pipe({
  name: 'filterOutEmptyData',
})
export class FilterOutEmptyDataPipe implements PipeTransform {
  transform(
    input: items[]
  ): items[] {
    return input?.filter(item => item.Value !== '');
  }
}

After that, in your HTML template,

<div class=data-item *ngFor="let item of (dataSource | filterOutEmptyData)">

Remember to include the pipe in your module as well.

Answer 5

Answer №3

Give this a try:

<div class=container>
  <ng-container *ngFor="let entry of dataCollection">
    <div class="data-entry" *ngIf="!!entry.value">
       <div>{{entry.title}}</div>
       <div>{{entry.value}}</div>
    </div>
  </ng-container>
</div>

To clarify, make sure the condition is applied to the actual box element and not just its contents as seen in your original code.

Also, take advantage of ngContainer which does not render any extra elements, to simplify the looping process.

Answer 6

Give this a try:

<div class=container>
  <ng-container *ngFor="let entry of dataCollection">
    <div class="data-entry" *ngIf="!!entry.value">
       <div>{{entry.title}}</div>
       <div>{{entry.value}}</div>
    </div>
  </ng-container>
</div>

To clarify, make sure the condition is applied to the actual box element and not just its contents as seen in your original code.

Also, take advantage of ngContainer which does not render any extra elements, to simplify the looping process.

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

Answer №1

Sample HTML

Answer №2

Answer №3

Similar questions

Is it possible to adjust the vertical background-position independently?

What is the best way to maintain a socket.io ID while navigating through dynamic HTML files?

Include the button beneath the Rating section using JQuery or AJAX

using an array as an argument in the filtering function

Add option button

The horizontal navigation bar will not extend the entire length of the page

Converting base64 dataUrls into images using typescript

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

Guide: Positioning the Icon in the Top Right Corner of the Image

Starting a new subscription once the current one expires

Updating a div's border using JavaScript

The object's key values were unexpectedly empty despite containing data

Sliding a div out from the right using jQuery

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

Executing a Parent Function from a Child Component in Angular 11

How to Connect to Printer in Ionic 2

The Component Spec (Karma) is failing to call the Angular Mock Service

Issues with Formik sign-up