[solved] How to select from list of divs?

Ionic Framework ionic-v3
1

I am new to Angular 2.
Here are a list of divs :

<div class="list">
 <div value="A">A</div>
 <div value="B">B</div>
 <div value="C">C</div>
 <div value="D">D</div>
 <div value="E">E</div>
</div>

How do I select only one div from this (like a radio list) and then handle the selected value ?

2

It is better that you make an array of values in your typescript file and then use the *ngFor directive.
Declare values:

values: Array<string>

Init values in constructor:

this.values = ['A','B','C','D'];

In your template:

<div class="list" *ngFor="let myValue of values">
 <div value="myValue">myValue</div>
</div>

Hope you get it :slight_smile:

4

Yes. But that would only make a list of divs. Now how do you make it “selectable” so that only div can be selected ?

5

Do you wish to make a list of selectable items? If yes, refer to this link: https://ionicframework.com/docs/components/#select

6

Yes. A list of selectable items but implemented like this http://jsfiddle.net/ntxuc69a/9/

7

I think Ionic v1 is not coordinated with angular 2 in any way :slight_smile:

8

I am developing on ionic 3 :slight_smile:

9

I have found a solution on StackOverflow

<div class="list">
 <div value="A" [class.highlight]="selection=='A'" (click)="clickFunction('A')">A</div>
 <div value="B" [class.highlight]="selection=='B'"  (click)="clickFunction('B')">B</div>
 <div value="C" [class.highlight]="selection=='C'"  (click)="clickFunction('C')">C</div>
 <div value="D" [class.highlight]="selection=='D'"  (click)="clickFunction('D')">D</div>
 <div value="E" [class.highlight]="selection=='E'" (click)="clickFunction('E')">E</div>
</div>

selection = "A";
clickFunction(value){
console.log(value)
this.selection = value;
}