CODEWITHSUNDEEP
javascriptangularionic-framework
Yuri Nunes
Yuri Nunes

Reputation: 13

Using *ngFor and retrieving html text from ion-label

I've been having a problem where I use *ngFor like this in my HTML: 

<ion-slides #slides [options]="slideOpts">
      <ion-slide class="numbers-wrapper"
                 *ngFor="let questionNumber of numbers"
                 (click)="clickQuestionNumber()">
        <ion-label #quesNum>{{ questionNumber }}</ion-label>
      </ion-slide>
    </ion-slides>

from an array in my TS file:

numbers = [
    '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21',
    '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40'];

It works fine and it displays as I wish, but my problem is that I would like to retrieve on click the text inside the ion-label {{ questionNumber }}

I have tried @viewchild and getElementbyId but it returns(or prints) the first value which is 01. When I check on the HTML of Developer tools, all the html from 01 to 40 are there as well as it displays on my screen. For some reason I can't manage to retrieve all numbers. I would like that whenever I click in 01 it returns 01, and 02 returns 02 and and so on.

this is my method:

clickQuestionNumber() {
   this.currentNumber = this.quesNum.nativeElement.innerText;
      }

I don't have much now since I've been trying all sort of things but it always return only the first value. Thank you

Upvotes: 1

Views: 150

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can simply do it on (click)

<ion-slide class="numbers-wrapper"
             *ngFor="let questionNumber of numbers"
             (click)="currentNumber = questionNumber">

Or,Try like this:

.html

 <ion-slide class="numbers-wrapper"
             *ngFor="let questionNumber of numbers"
             (click)="clickQuestionNumber(questionNumber )">

.ts

clickQuestionNumber(number) {
   this.currentNumber = number;
}

Upvotes: 2

Related Questions