0
277
Viewswhy do I get a blank space in the false element statements
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>`
·
Juan Pablo Isaza
1 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
Answer question