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

Testing the Binding of Models in Angular 5 Using Jasmine Framework

Interacting with local data using Express server

Hide the menu when a menu link is selected

Share your Angular Elements web component as an npm module

Next.js v13 and Firebase are encountering a CORS policy error which is blocking access to the site.webmanifest file

Tips for determining what elements are being updated in terms of style

Using the HTML form element to achieve two-way binding on array elements

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

Separate the iframe sessions

Using a foreach loop to showcase information within elements, specifically for JSON with several arrays

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

The table headers in the second table do not match the queryAllSelector

Having trouble with running the command ng update -g @angular/cli, receiving an error message

converting an entire HTML layout into a PDF using JavaScript

GSAP also brings scale transformations to life through its animation capabilities

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

Seeking guidance on utilizing JavaScript for implementing an onclick event

Angular: Refresh Mat-Table data following any changes

Identify when a click occurs outside specific elements

What could be causing my page width to only expand to 100% when using "fit-content"?