I'm puzzled as to why there is a blank space in the false element statements

Hey there! I'm noticing a blank space on the page, and when I inspect it, I see this bindings={ "ng-reflect-ng-if": "false" }. It seems like I am getting some blank cards displayed. Here is an image showing what I mean: https://i.sstatic.net/9EDFN.png

`<section class="play-n-win-section">
  
  <h1 class="play-n-win-paragraph">play N Win</h1>
 <div class="card-container">
 <div *ngFor="let item of games; index as i">
 
    <mat-card class="cards" *ngIf="i <= 11">
        <mat-card-header>
            <mat-card-title>{{item.game_name}}</mat-card-title>
            <mat-card-subtitle>{{item.game_description}}</mat-card-subtitle>
          </mat-card-header>
          <div class="game-cover-container">  
            <img class="game-cover" mat-card-image src="{{item.game_cover_url}}" alt="{{item.game_name}}">
          </div>
          <mat-card-content>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,was 
              popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages
            </p>
          </mat-card-content>
      </mat-card>
   
</div>
</div>
<a mat-button routerLink="playandwin ">Link</a>
</section>`

Answer №1

The excess elements are being generated by ngFor because they exist in the array games that is being iterated over.

A possible solution would be to iterate over a smaller array or utilize a pipe instead.

You can create a method in your class:

get first12Games(){
return this.games ? this.games.slice(0,12) : [];
}

In your HTML template:

*ngFor="let item of first12Games;

This eliminates the need for using *ngIf="i<=11"

While it is recommended to use pipes for optimization (https://angular.io/guide/pipes), it may not be necessary for smaller projects.

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

Prolong the Slide Duration in Slider Pro Slideshow

I am currently utilizing Slider Pro from bqworks.com for a slideshow with automated cycling on my website. I would like to adjust the display duration of each image in the slideshow. The documentation mentions a property called "slideAnimationDuration," wh ...

Is the top bar feature malfunctioning in version 4.3.2 of Foundation?

During my previous project, I utilized the open-source Foundation 4 framework and successfully implemented a top bar navigation. Now, as I embark on a new project with Foundation, I have downloaded the Foundation 4.3.2 version from . Despite referencing th ...

Implementing a video pause event trigger from a function in Angular2

Here is the content of my player.component.html: <video width="320" height="240" autoplay autobuffer [src]="videoSrc" (ended)="videoEnd()"> Your browser does not support the video tag. </video> <button (click)="pauseOrPlay()">pause/play ...

Adding form input fields in real-time by clicking the add button

Currently, I am looking to develop a party hosting application using Ionic 2. My main goal is to have the ability to add form input fields for guests dynamically by clicking on an "add" button. Do you have any suggestions on how this can be achieved in I ...

Automatic panning of JavaScript on a map

Having some issues with the functionality of the pan function. It's working, but not quite how I need it to. Currently, I have a logo overlaying a map and I want to pan away from the logo automatically to show an infowindow (panning left or right). H ...

Change the background color of a span element dynamically

I am currently working on implementing dynamic background coloring for a span tag in my Angular view that displays document types. The code snippet provided is as follows: <mat-card *ngFor="let record of records"> <span class="doc ...

Image carousel with variable height

I'm attempting to implement a slide show of images with previous and next functionality. When the user clicks "previous," I want the images to slide to the left, and when they click "next," I want the images to slide to the right with a 0.5 second del ...

In what ways can enhancing the TypeScript type system with additional restrictions help eliminate errors?

Encountered issues while working on my TypeScript project due to errors in the type definitions of a library. The solution was to enable the strictNullChecks flag. It seems counter-intuitive that adding restrictions can eliminate errors, when usually it&a ...

A div element with the class name "draggable" is

One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function: function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { console.log('Attem ...

Implementing Read-Only Properties in Interfaces and/or Classes

I am currently working on a class that acts as a Model and I want to ensure that the data within it is read-only. While this may seem straightforward at first, things get more complicated when dealing with nested data structures. Let me provide an example ...

Is there a way to arrange two columns in a horizontal line?

The alignment of the columns is off: https://i.sstatic.net/1l4CO.png The issue: https://i.sstatic.net/Iokm9.jpg I am looking to create a blog layout with 2 columns: one column for the main content, displaying articles the other column as a menu To a ...

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

Error message: The specified expression cannot be built using Google OAuth authentication in a Node.js environment

I'm currently working on integrating my NodeJS API, which was developed in TypeScript, with Google Oauth2 using Passport. However, when following the documentation written in JavaScript, I encountered an error underlining GoogleStrategy. This expressi ...

Which JavaScript objects contain the addEventListener method within their prototype?

I am aware of the following: Element.prototype.addEventListener Window.prototype.addEventListener Document.prototype.addEventListener Are there any more? ...

Guide to automatically converting Google fonts to base64 for inline use

I am currently in the process of creating my own personal blog using next.js. While everything is going smoothly with the use of Google Fonts for font styling, I have encountered an issue with initial content shift upon loading. This occurs when a new fon ...

Tips for efficiently updating numerous words in text on a webpage powered by AJAX, as well as in select attributes, by implementing a Tampermonkey script

My approach involves translating specific text, words, and terms within an HTML document using a tree walker to target only text nodes: var replaceArry = [ [/View your user account/gi, 'Tu cuenta'], // etc. ]; var numTerms = replac ...

Improve the performance of my website and resolve the zooming problem

Trying my hand at teaching myself jquery and creating a decent layout. I believe what I have done is acceptable, but I still have some questions. This is my first attempt at jquery without copying someone else's work. I've aimed to keep it relev ...

What is the best way to target changing elements displayed by *ngIf?

Trying to access a dynamic element generated by ngIf in the code below has proven to be challenging. I attempted two different methods: Using ElementRef and querySelector Component template: `<div class="test" *ngIf="expr"> <a id="b ...

Angular 17 Pokedex Encyclopedia

Recently, I tackled a challenge during my Boot Camp where I had to create a Pokedex using pokeapi. After successfully completing the challenge, I decided to refine some aspects of it. However, I encountered an unusual issue when delving into the details of ...