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

Wiesbaden

Image
Wappen Deutschlandkarte 50.0825 8.24 117 Koordinaten: 50° 5′  N , 8° 14′  O Basisdaten Bundesland: Hessen Regierungsbezirk: Darmstadt Höhe: 117 m ü. NHN Fläche: 203,93 km 2 Einwohner: 278.654 (31. Dez. 2017) [1] Bevölkerungsdichte: 1366 Einwohner je km 2 Postleitzahlen: 65183–65207, 55246, 55252 Vorlage:Infobox Gemeinde in Deutschland/Wartung/PLZ enthält Text Vorwahlen: 0611, 06122, 06127, 06134 Kfz-Kennzeichen: WI Gemeindeschlüssel: 06 4 14 000 LOCODE: DE WIB NUTS: DE714 Stadtgliederung: 26 Ortsbezirke Adresse der Stadtverwaltung: Schlossplatz 6 65183 Wiesbaden Webpräsenz: www.wiesbaden.de Oberbürgermeister: Sven Gerich (SPD) Lage der Landeshauptstadt Wiesbaden in Hessen und im Regierungsbezirk Darmstadt Offizielles Logo der Landeshauptstadt Wiesbaden Flagge der Landeshauptstadt Wiesbaden Wiesbaden is
Read more

Marschland

Image
Kilometerweite Marsch in den Vier- und Marschlanden am Elbdeich Die Wedeler Marschlandschaft in Schleswig-Holstein Der Hadelner Kanal zur Entwässerung der Marsch Die tief gelegene Marsch und ein Entwässerungskanal Das Schöpfwerk Otterndorf im Land Hadeln zur Entwässerung der Medem verfügte damals bereits über die größte Kreiselpumpe Europas. Das Schöpfwerk in Neuhaus für die Aue und des Neuhaus-Bülkauer Kanals Als Marsch(land) (v. niederdt., altsächs. mersc ) – auch Masch , Mersch oder Schwemmland genannt – bezeichnet man eine nacheiszeitlich entstandene geomorphologische Landform im Gebiet der nordwestdeutschen Küsten und Flüsse sowie vergleichbare Landformen weltweit. Inhaltsverzeichnis 1 Landschaft 2 Entstehung 3 Marschböden 4 Nutzung 5 Marschgebiete in Deutschland 6 Siehe auch 7 Literatur 8 Weblinks 9 Einzelnachweise Landschaft | Marschen sind generell flache Landstriche ohne natürliche Erhebungen. Si
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