why do I get a blank space in the false element statements

Issue

hello I'm getting a blank space in the page and that's what I get when I want to inspect the page bindings={ "ng-reflect-ng-if": "false" } and I found out that I'm getting a a blank cards here is an image for it :

`<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>`

Solution

The ngfor is creating those extra elements because they are in the array (games) that you are ngFor-ing

The solution is to instead ngFor over a smaller array, or use a pipe

In your class

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

Then in the html

*ngFor="let item of first12Games;

And then you won't have to use *ngIf="i<=11"

Technically it's best practice to use pipes https://angular.io/guide/pipes for this, but an optimization like that isn't a concern in a smaller project.

Answered By - Donald Duck