CODEWITHSUNDEEP
javascriptangular
MrRobot
MrRobot

Reputation: 1167

Show specific Div inside ngFor

I have a bunch of cards using ngFor with user's information. There is a button inside the card that will display travel information for that specific user.

I created a div with the initial state display: none. I thought about using ngStyle to bind the display: block property upon click, but the problem is that all the divs are getting displayed and not only the specific one I need.

Any suggestions on how I can do this?

html

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox()">access_alarm</i>

   <div class="travel-info" [ngStyle]="{'display': boxDisplay == true ? 'block' : 'none'}" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

ts

boxDisplay = false;

showBox() {
    this.boxDisplay = true;
}

Upvotes: 1

Views: 3183

Answers (3)

Nicol&#225;s M
Nicol&#225;s M

Reputation: 36

You can use @ViewChildren. I give you this example:

Your HTML:

<div class="student-container" *ngFor="let s of students; let i = index">
  <span>Name: {{s.name}} - Index: {{i}}</span>
  <div class="student-box" #boxes>
    <span>Hey! I'm opened.</span>
    <span>My Secret Number is: {{s.secretNumber}}</span>
  </div>
  <button (click)="toggleBox(i)">Click Me!</button>
</div>

Your Component:

import { Component, ViewChildren, QueryList, ElementRef } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChildren("boxes") private boxes: QueryList<ElementRef>;

  students = [
    { name: "Peter", secretNumber: "88" },
    { name: "Laura", secretNumber: "45" },
    { name: "Paul", secretNumber: "13" }
  ];

  toggleBox(index) {
    let nativeElement = this.boxes.toArray()[index].nativeElement;
    nativeElement.style.display =
      nativeElement.style.display === "none" || !nativeElement.style.display
        ? "block"
        : "none";
  }
}

Your CSS:

.student-container {
  background: lightblue;
  margin: 10px;
  padding: 10px;
}

.student-box {
  display: none;
}

https://codesandbox.io/s/zwqoxp583x

Upvotes: 2

Amos47
Amos47

Reputation: 695

The problem is you only have one variable that is set for all of them.

You will want to refactor showBox to be something like this.

TS

this.boxDisplay = this.students.map(s => false);

showBox(index) {
  this.boxDisplay[index] = true;
}

HTML

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox(i)">access_alarm</i>

   <div class="travel-info" [ngStyle]="{'display': boxDisplay[i] == true ? 'block' : 'none'}" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

If it were me I would use ngIf instead of the ngStyle.

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox(i)">access_alarm</i>

   <div class="travel-info" *ngIf="boxDisplay[i]" >
      <app-travel-info ></app-travel-info>
   </div>
</div>

Upvotes: 5

Sajeetharan
Sajeetharan

Reputation: 222682

You need to have a property display with each elements of the students array and then enable/disable based on the index,

<div class="col s12 m6 l4" *ngFor="let student of students; let i = index">
   <i class="material-icons" (click)="showBox(student)">access_alarm</i>
   <div class="travel-info" [ngStyle]"{'display': student.boxDisplay == true ? 'block' : 'none'}" >
      <app-travel-info ></app-travel-info>
   </div>
</div>


showBox(student:any) {
    student.boxDisplay = true;
}

Upvotes: 3

Related Questions