How to display the array index value at console in angular 2

Question

How can I display array index value in console window on click of the button which is present inside the carousel component? where the console window is displaying index value twice and at last its redirecting to 1st array index value as 1. Console window should only display the index value with increment of 1 so it starts displaying array index value from.

guide.html

<tr *ngFor="let guide of guides">
  <td>{{guide.Type}}</td>
  <td>{{guide.PageColor}}</td>
  <td>
  	<carousel class="carousel slide" data-interval="false">
	    <slide  *ngFor="let image of images; let i=index ">
	      <p>Image: {{i+1}}</p>
	      <img src="{{image.image}}" alt="First slide"/>
	      <p (click)="idValue(i)">
	       	<input type="file" name="file" id="file" />
	       	<label for="file">{{image.change}}</label>
	      </p>
	     </slide>
  	</carousel>
	</td>
</tr>

guide.component.ts

import { Component } from '@angular/core';
import { CarouselModule } from 'ngx-bootstrap';
@Component({
  templateUrl: './guide.html'
})
export class GuideComponent {
	guides : any = [{ Type: 'Company', PageColor: 'red'},{ Type: 'Company', PageColor: 'Blue'}];

	images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];
        
	idValue(i) {
		i=i+1;
		console.log(i);
	}
}

can u please rephrase the question a bit ? i think i might understood what is the problem but i don't want to post an answer before i am certain. thanks — DrNio
– DrNio, Commented Dec 5, 2017 at 10:44
console is printing the index value, everytime it is printed twice and it is always printing 1 at 2nd time — chv
– chv, Commented Dec 5, 2017 at 10:48
so how to avoid it printing 1 in console, if index value is 3 its displaying 3 1st and along with 3 its displaying 1 — chv
– chv, Commented Dec 5, 2017 at 10:49
It can be that the carousel $event is triggered twice try in html: <p (click)="$event, idValue(i)"> in in component: idValue(event, i) { i=i+1; console.log(event, i); } and check the output. — Swoox
– Swoox, Commented Dec 5, 2017 at 11:19

Oleksandr Poshtaruk · Accepted Answer · 2017-12-05 17:17:19Z

2

Here is a simplified version of your code, that works. In two words = simple types (number is our case) copied to click-handler arguments, not send by ref. So every time you got same value from i.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div  *ngFor="let image of images; let i=index ">
          <p>Image: {{i+1}}</p>

          <p (click)="idValue(i)">
          Button
          </p>
         </div>
  `,
})
export class AppComponent  { 

  images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];
  indexArr = new Array(this.images.length + 1);

    idValue(i) {
      if(!this.indexArr[i]) { this.indexArr[i] = 0};
        this.indexArr[i] += 1;
        console.log('index:', i, ' Click number', this.indexArr[i]);
    }

}

edited Dec 5, 2017 at 17:17

answered Dec 5, 2017 at 11:19

Oleksandr Poshtaruk

2,20618 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chv Over a year ago

Thank you for trying but its not displaying any index value in console

Oleksandr Poshtaruk Over a year ago

Corrected to display index and clicknumber

Collectives™ on Stack Overflow

How to display the array index value at console in angular 2

guide.html

guide.component.ts

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

guide.html

guide.component.ts

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related