How to declare ngif value by concatenate in angular

Issue

Trying to hide bullet point by ngIf but not working. How to declare an ngif value by concatenating If anyone knows, please help to find the solution.

app.component.html:

<mat-list>
    <mat-list-item *ngFor="let season of seasons; index as i">
        <span *ngIf="season.toLowerCase().split(' ').join('') + i" class="bullet"></span>
        <p (click)="hides(season)" matLine>{{ season }}</p>
    </mat-list-item>
</mat-list>

Demo : https://stackblitz.com/edit/angular-8-material-starter-template-uewc3u?file=src%2Fapp%2Fapp.component.html

Solution

OK, your solution is overcomplicated. Just store the index of clicked position

<p matLine (click)="hides(i)">{{ season }}</p>

  hiddenIndex = -1;

  hides(val: number) {
    this.hiddenIndex = val;
  }

and hide the element:

    <span class="bullet" *ngIf="hiddenIndex !== i"></span>

The groupid0 and the rest of the variables should go. Here's a modified stackblitz: https://stackblitz.com/edit/angular-8-material-starter-template-fkttxa?file=src/app/app.component.ts

Answered By - mbojko