CODEWITHSUNDEEP
typescriptelementref
user6781
user6781

Reputation: 333

Getting html value in typescript using @ViewChild()

I am using ngbSlide as following:

<ngb-carousel>
  <ng-template ngbSlide *ngFor="let item of images; let i = index">
      <img src="{{item}}"/>               
      <input type="text" #index value="{{i}}"/> 
  </ng-template>     
</ngb-carousel>

I want to know which of the three images is shown to the user at any moment. To get this value, I'm trying to use @ViewChild as following:

export class GalleryComponent {
    @ViewChild('index') index!: ElementRef;

    images: string [] = [
     "https://picsum.photos/id/700/900/500",
     "https://picsum.photos/id/1011/900/500",
     "https://picsum.photos/id/984/900/500"    
    ]        
   
    constructor() {}

    ngAfterContentChecked () {        
      console.log("index value is: ", this.index?.nativeElement.value)     
    }    
}

But the index value is once undefined, and then is always 0, however, I see the value of input is updating. Any idea what is wrong in my code? I am using angular 17.

I have followed answers to this very similar question and used @viewChild as:

    @ViewChild('index', {static: false})
    private index!: ElementRef;

but still I only get 0 as index value.

Upvotes: 0

Views: 36

Answers (2)

Developer Nilesh
Developer Nilesh

Reputation: 570

Template Update:

<ngb-carousel #carousel="ngbCarousel" (slide)="onSlide($event)">
  <ng-template ngbSlide *ngFor="let item of images; let i = index" id="slide-{{i}}">
      <img src="{{item}}"/>               
  </ng-template>     
</ngb-carousel>

Component Update:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent implements AfterViewInit {
  @ViewChild(NgbCarousel) carousel!: NgbCarousel;

  images: string [] = [
    "https://picsum.photos/id/700/900/500",
    "https://picsum.photos/id/1011/900/500",
    "https://picsum.photos/id/984/900/500"    
  ];

  constructor() {}

  ngAfterViewInit() {
    
    console.log("Initially active slide:", this.carousel.activeId);
  }

  onSlide(event: any) {
    console.log("Current slide index:", event.current);
    
    const currentIndex = event.current.replace('slide-', '');
    console.log("Extracted index:", currentIndex);
  }
}

Upvotes: 0

Wessel van Leeuwen
Wessel van Leeuwen

Reputation: 315

There might be a few things wrong with your example.

If you want to assign a variable to the value attribute of an HTML tag you would want to use [value]= or value=.

This would make your <input> look as follows:

<input type="text" #index [value]="i"/>

Same for IMG:

<img [src]="item"/>

Now I'm wondering, did the images show up correctly in your component?

One other problem might be that you have multiple instances of #index which would cause Angular to not know which one to point to, however it might just take the first or last in the sequence.

EDIT: It will take the first since your index is 0 as you said in your post.

Upvotes: 0

Related Questions