import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
list:any[] = [
{ productImage: 'https://angular.io/assets/images/logos/angular/[email protected]', product_name: 'anguar', visible: true},
{ productImage: 'https://angular.io/assets/images/logos/angular/[email protected]', product_name: 'anguar', visible: true},
{ productImage: 'https://angular.io/assets/images/logos/angular/[email protected]', product_name: 'anguar', visible: true},
{ productImage: 'https://angular.io/assets/images/logos/angular/[email protected]', product_name: 'anguar', visible: true},
{ productImage: 'https://angular.io/assets/images/logos/angular/[email protected]', product_name: 'anguar', visible: true},
]
similar:any[] = [
{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
]
display(indexNumber){
console.log("inside display for:"+indexNumber);
for(var i=0; i< this.list.length; i++){
if (i==indexNumber || i==indexNumber-1
/* comment the line below to hide n+1 item to display */
|| i==indexNumber+1
/* comment the line above to hide n+1 item to display */
){
this.list[i].visible=true;
}
else{
this.list[i].visible=false;
}
}
for(var i=0; i< this.similar.length; i++){
if (i==indexNumber+1){
this.similar[i].visible=true;
}
else{
this.similar[i].visible=false;
}
}
/*
this.list.forEach((x) => x.hidden = true);
x.hidden = false;
*/
}
}
<hello name="{{ name }}"></hello>
<div class="row ">
<div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;">
<div class="card">
<div class="card-body" *ngIf="x.visible">
<img src="{{x.productImage}}" class=" rounded" (click)="display(i)" />
{{x.product_name}} {{i}}
</div>
</div>
</div>
</div>
<div class="row ">
<div class=" col-md-3" *ngFor="let y of similar; let iy = index " style="padding:15px;" >
<div class="card" >
<div class="card-body" *ngIf ="y.visible" >
<img src="{{y.productImage}}" class=" rounded" >
{{y.product_name}} {{iy}}
</div>
</div>
</div>
</div>