Use *ngIf on single element of ng for

Question

So what i made a panel with bootstrap panel and im only displaying the panel header and when i press on it i want to do an ngIf that shows all the elements of my panel. But i want that it only shows the elements of the pressed panel and that it doesnt show the elements of all the panels made with my ngFor. I will post a picture what i mean.

So this is what it looks like when they are all closed:

Now i press the number 41 for example what i want to happen is that only the elements in the panel 41 become visible. But this is what it happens;

All panel elements become visible. Is there a way to get only the pressed element to show?

HTML CODE:

    <div *ngFor="let _dagpunt of dagpunt ">
    <div class="list-group">

        <a class="list-group-item active, uiterlijk" (click)="showDagpunt()">
           {{_dagpunt.bootcampid}}
        </a>
        <div *ngIf="showdagpunten">
            <a class="list-group-item">
                <span style="font-weight:bold">Naam :</span> {{_dagpunt.naam}}<br />
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold">  Datum : </span>{{_dagpunt.datum | date:"dd/MM/yy"}}<br />
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Beginuur :</span>   {{_dagpunt.beginuur | date:"h:mm a"}}
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Einduur :</span>  {{_dagpunt.einduur | date:"h:mm a"}}
            </a>
            <a class="list-group-item">
                <span style="font-weight:bold"> Beschrijving :</span>  {{_dagpunt.description}}
            </a>
            <a class="list-group-item">
                <span (click)="onSelect(_dagpunt)" class="btn btn-info" role="button">Review</span>
                <!--<span (click)="delete(_dagpunt)" class="btn btn-info" role="button">Uischrijven</span>-->
            </a>
        </div>
    </div>

</div>

So i declare my array like this: dagpunt: Dagpunt[] = [];

and my interface dagpunt looks like this :

export interface Dagpunt {
    iddagpunt: number;
    naam: string;
    description: string;
    datum: Date;
    beginuur: Date;
    einduur: Date;
    bootcampid: number;

}

So this is how a console.log of my dagpunt array looks like:

Answer 1

Try this :

  <a class="list-group-item active, uiterlijk" (click)="showDagpunt()">
     {{_dagpunt?.bootcampid}}
  </a>
  <div *ngIf="_dagpunt?.active">
      <a class="list-group-item">
          <span style="font-weight:bold">Naam :</span> {{_dagpunt.naam}}<br />
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold">  Datum : </span>{{_dagpunt.datum | date:"dd/MM/yy"}}<br />
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Beginuur :</span>   {{_dagpunt.beginuur | date:"h:mm a"}}
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Einduur :</span>  {{_dagpunt.einduur | date:"h:mm a"}}
      </a>
      <a class="list-group-item">
          <span style="font-weight:bold"> Beschrijving :</span>  {{_dagpunt.description}}
      </a>
      <a class="list-group-item">
          <span (click)="onSelect(_dagpunt)" class="btn btn-info" role="button">Review</span>
          <!--<span (click)="delete(_dagpunt)" class="btn btn-info" role="button">Uischrijven</span>-->
      </a>
  </div>

showDagpunt(item){
  for(let i=0; i< this.dagpunt.length; i++){
    this.dagpunt[i].active = false;
  }
  item.active = true;
}