Showing additional information on list elements [Angular] - html

Question

I am learning Angular, and I try to create a small project. I use the following code:
TS:
export class Basic implements OnInit {
products:any[];
hide: boolean = true;
constructor() {
this.products=[
{
name:"Mac Book Pro",
price:"1000",
color:"grey"
},
{
name:"iPhone",
price:"700",
color:"black"
}
]
}
ngOnInit(): void {
}
toggle(){
this.hide=!this.hide;
}
}
HTML:
<div *ngFor="let x of products">
<div (click)="toggle()">{{x.name}}</div>
<div [hidden]="hide">
{{x.price}}
{{x.color}}
</div>
</div>
So, the code produces a list of products. My aim is once I click on one product to get its additional information below it. But I can't figure out how to make it only for one element. Currently, when I press on the first element, it also shows the information for the second.

Answer 1

The problem is that you have one varibale hide for all of items. So you can do that by a extra property say isOpen in you model:
<div *ngFor="let x of products;">
<div (click)="toggle(x)">{{x.name}}</div>
<div [hidden]="!x.isOpen">
{{x.price}}
{{x.color}}
</div>
</div>
toggle(x){
x.isOpen = !x.isOpen
}
Here is working sample I created for you: Stackblitz