by click show the previous cards and clicked card and hide the other index in angular 6












1















By displaying all the cards, by clicking on the card clicked card and previous cards should be visible and other should be invisible.how could i do it?



app.component.html



<div class="row ">

  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;" [hidden]="x.hidden">

    <div class="card ">

      <div class="card-body ">

        <img src="{{x.productImage}}" class=" rounded" (click)="display(x)" >

        <div>{{x.product_name}} {{i}}</div>

      </div>

   </div>

</div>

</div>


app.component.ts



list:object;

ngOninit{

  this.data.getList().subscribe(data => {

  this.list  = data;

});

display(x){

  this.list.forEach((x) => x.hidden = true);

  x.hidden = false;

}





angular visibility







share|improve this question

























  • (1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

    – Akber Iqbal
    Nov 26 '18 at 5:10











  • how to set for the selected element, n-1 element and n+1 set the visibility to true?

    – Archana R
    Nov 26 '18 at 5:21











  • if you add a working stackblitz for your existing code, i can update it there

    – Akber Iqbal
    Nov 26 '18 at 5:41











  • stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

    – Archana R
    Nov 26 '18 at 5:53













  • i can edit... let me try doing what you want

    – Akber Iqbal
    Nov 26 '18 at 5:58
















1















By displaying all the cards, by clicking on the card clicked card and previous cards should be visible and other should be invisible.how could i do it?



app.component.html



<div class="row ">

  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;" [hidden]="x.hidden">

    <div class="card ">

      <div class="card-body ">

        <img src="{{x.productImage}}" class=" rounded" (click)="display(x)" >

        <div>{{x.product_name}} {{i}}</div>

      </div>

   </div>

</div>

</div>


app.component.ts



list:object;

ngOninit{

  this.data.getList().subscribe(data => {

  this.list  = data;

});

display(x){

  this.list.forEach((x) => x.hidden = true);

  x.hidden = false;

}





angular visibility







share|improve this question

























  • (1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

    – Akber Iqbal
    Nov 26 '18 at 5:10











  • how to set for the selected element, n-1 element and n+1 set the visibility to true?

    – Archana R
    Nov 26 '18 at 5:21











  • if you add a working stackblitz for your existing code, i can update it there

    – Akber Iqbal
    Nov 26 '18 at 5:41











  • stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

    – Archana R
    Nov 26 '18 at 5:53













  • i can edit... let me try doing what you want

    – Akber Iqbal
    Nov 26 '18 at 5:58














1












1








1








By displaying all the cards, by clicking on the card clicked card and previous cards should be visible and other should be invisible.how could i do it?



app.component.html



<div class="row ">

  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;" [hidden]="x.hidden">

    <div class="card ">

      <div class="card-body ">

        <img src="{{x.productImage}}" class=" rounded" (click)="display(x)" >

        <div>{{x.product_name}} {{i}}</div>

      </div>

   </div>

</div>

</div>


app.component.ts



list:object;

ngOninit{

  this.data.getList().subscribe(data => {

  this.list  = data;

});

display(x){

  this.list.forEach((x) => x.hidden = true);

  x.hidden = false;

}





angular visibility







share|improve this question
















By displaying all the cards, by clicking on the card clicked card and previous cards should be visible and other should be invisible.how could i do it?



app.component.html



<div class="row ">

  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;" [hidden]="x.hidden">

    <div class="card ">

      <div class="card-body ">

        <img src="{{x.productImage}}" class=" rounded" (click)="display(x)" >

        <div>{{x.product_name}} {{i}}</div>

      </div>

   </div>

</div>

</div>


app.component.ts



list:object;

ngOninit{

  this.data.getList().subscribe(data => {

  this.list  = data;

});

display(x){

  this.list.forEach((x) => x.hidden = true);

  x.hidden = false;

}





angular visibility




angular visibility






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 10:28









rjdkolb

4,83474864




4,83474864










asked Nov 26 '18 at 4:59









Archana RArchana R

416




416













  • (1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

    – Akber Iqbal
    Nov 26 '18 at 5:10











  • how to set for the selected element, n-1 element and n+1 set the visibility to true?

    – Archana R
    Nov 26 '18 at 5:21











  • if you add a working stackblitz for your existing code, i can update it there

    – Akber Iqbal
    Nov 26 '18 at 5:41











  • stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

    – Archana R
    Nov 26 '18 at 5:53













  • i can edit... let me try doing what you want

    – Akber Iqbal
    Nov 26 '18 at 5:58



















  • (1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

    – Akber Iqbal
    Nov 26 '18 at 5:10











  • how to set for the selected element, n-1 element and n+1 set the visibility to true?

    – Archana R
    Nov 26 '18 at 5:21











  • if you add a working stackblitz for your existing code, i can update it there

    – Akber Iqbal
    Nov 26 '18 at 5:41











  • stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

    – Archana R
    Nov 26 '18 at 5:53













  • i can edit... let me try doing what you want

    – Akber Iqbal
    Nov 26 '18 at 5:58

















(1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

– Akber Iqbal
Nov 26 '18 at 5:10





(1) add a visibility field to "list" array. (2) for the selected element, n-1 element and n+1 set the visibility to true (3) for all else, set them to false (4) put ng-if so that only items with visibility true are shown

– Akber Iqbal
Nov 26 '18 at 5:10













how to set for the selected element, n-1 element and n+1 set the visibility to true?

– Archana R
Nov 26 '18 at 5:21





how to set for the selected element, n-1 element and n+1 set the visibility to true?

– Archana R
Nov 26 '18 at 5:21













if you add a working stackblitz for your existing code, i can update it there

– Akber Iqbal
Nov 26 '18 at 5:41





if you add a working stackblitz for your existing code, i can update it there

– Akber Iqbal
Nov 26 '18 at 5:41













stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

– Archana R
Nov 26 '18 at 5:53







stackblitz.com/edit/angular-ngetz9 added the stackblitz code can you update?

– Archana R
Nov 26 '18 at 5:53















i can edit... let me try doing what you want

– Akber Iqbal
Nov 26 '18 at 5:58





i can edit... let me try doing what you want

– Akber Iqbal
Nov 26 '18 at 5:58












1 Answer
1






active

oldest

votes


















0














just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function. 






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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>








share|improve this answer


























  • in N+1 position I have to display the other div cards how to do it?

    – Archana R
    Nov 27 '18 at 12:42











  • what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

    – Akber Iqbal
    Nov 27 '18 at 16:10











  • edited the code but not in stackoverflow

    – Archana R
    Nov 28 '18 at 5:29











  • This snippet doesn't seem to work

    – Ramakanth Reddy
    Feb 7 at 9:08











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475003%2fby-click-show-the-previous-cards-and-clicked-card-and-hide-the-other-index-in-an%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function. 






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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>








share|improve this answer


























  • in N+1 position I have to display the other div cards how to do it?

    – Archana R
    Nov 27 '18 at 12:42











  • what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

    – Akber Iqbal
    Nov 27 '18 at 16:10











  • edited the code but not in stackoverflow

    – Archana R
    Nov 28 '18 at 5:29











  • This snippet doesn't seem to work

    – Ramakanth Reddy
    Feb 7 at 9:08
















0














just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function. 






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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>








share|improve this answer


























  • in N+1 position I have to display the other div cards how to do it?

    – Archana R
    Nov 27 '18 at 12:42











  • what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

    – Akber Iqbal
    Nov 27 '18 at 16:10











  • edited the code but not in stackoverflow

    – Archana R
    Nov 28 '18 at 5:29











  • This snippet doesn't seem to work

    – Ramakanth Reddy
    Feb 7 at 9:08














0












0








0







just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function. 






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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>








share|improve this answer















just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function. 






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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>








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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>





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/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},

    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>






share|improve this answer














share|improve this answer



share|improve this answer








edited Feb 7 at 8:45









Archana R

416




416










answered Nov 26 '18 at 6:13









Akber IqbalAkber Iqbal

2,94341326




2,94341326













  • in N+1 position I have to display the other div cards how to do it?

    – Archana R
    Nov 27 '18 at 12:42











  • what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

    – Akber Iqbal
    Nov 27 '18 at 16:10











  • edited the code but not in stackoverflow

    – Archana R
    Nov 28 '18 at 5:29











  • This snippet doesn't seem to work

    – Ramakanth Reddy
    Feb 7 at 9:08



















  • in N+1 position I have to display the other div cards how to do it?

    – Archana R
    Nov 27 '18 at 12:42











  • what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

    – Akber Iqbal
    Nov 27 '18 at 16:10











  • edited the code but not in stackoverflow

    – Archana R
    Nov 28 '18 at 5:29











  • This snippet doesn't seem to work

    – Ramakanth Reddy
    Feb 7 at 9:08

















in N+1 position I have to display the other div cards how to do it?

– Archana R
Nov 27 '18 at 12:42





in N+1 position I have to display the other div cards how to do it?

– Archana R
Nov 27 '18 at 12:42













what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

– Akber Iqbal
Nov 27 '18 at 16:10





what do you mean? what is in the other div? is it a list?... edits to your stackblitz would help...

– Akber Iqbal
Nov 27 '18 at 16:10













edited the code but not in stackoverflow

– Archana R
Nov 28 '18 at 5:29





edited the code but not in stackoverflow

– Archana R
Nov 28 '18 at 5:29













This snippet doesn't seem to work

– Ramakanth Reddy
Feb 7 at 9:08





This snippet doesn't seem to work

– Ramakanth Reddy
Feb 7 at 9:08




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475003%2fby-click-show-the-previous-cards-and-clicked-card-and-hide-the-other-index-in-an%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

To store a contact into the json file from server.js file using a class in NodeJS

Image
0 I have created three files -contactPresentation.js, contactService.js, contacts.json. I will run the contactService.js file. And it will navigate to contactPresentation.js file that will only choose an option to either add or display a file. If add(), then add the data into add of service file.And the data will be added to the contacts.json file . And if display(), then display the display() of service file. And the display will take the data from contacts.json file. However, i know my code is flawed. Please correct it . I am also getting an error - this.contacts.push(new ContactService(userName, contactNumber, emailId)); ^ TypeError: Cannot read property 'push' of undefined at ContactService.add (e:NodeJSProjectcontactManager2contactService.js:57:23) at new C
Read more

Redirect URL with Chrome Remote Debugging Android Devices

Image
1 How can i redirect an URL with Chrome Remote Debugging Android Devices? like Requestly Chrome extension on desktop. google-chrome debugging url redirect testing share | improve this question edited Nov 24 '18 at 8:16 sachinjain024 14.7k 23 73 129 asked Nov 23 '18 at 16:09 Momen Momen 91 10
Read more

Dieringhausen

Image
Dieringhausen Stadt Gummersbach 50.982777777778 7.5316666666667 165 Koordinaten: 50° 58′ 58″  N , 7° 31′ 54″  O Höhe: 165  (160–245)  m Einwohner: 5055  (30. Jun. 2016) Postleitzahl: 51645 Vorwahl: 02261 Lage von Dieringhausen in Gummersbach Im Hohl ca. 1927–1930 Ansicht von Südwesten bei Bünghausen Dieringhausen (im örtlichen Dialekt Dierkesen ) ist ein Ortsteil von Gummersbach im Oberbergischen Kreis, Regierungsbezirk Köln, Nordrhein-Westfalen (Deutschland). Inhaltsverzeichnis 1 Geographie 2 Geschichte 3 Kultur 3.1 Sehenswürdigkeiten 3.2 Regelmäßige Veranstaltungen 4 Infrastruktur und Wirtschaft 4.1 Verkehr 4.1.1 Schienen- und Busverkehr 4.1.2 Straßen 4.2 Öffentliche Einrichtungen 4.2.1 Schulen und Bildungseinrichtungen 4.2.2 Kirchliche Einrichtungen 5 Persönlichkeiten 5.1 In Dieringhausen geboren 5.2 In Dieringhausen gelebt 6 Einzelnachweise 7
Read more