[solved] How to select from list of divs?


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>

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


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>

Hope you get it :slight_smile:


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


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


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


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


I am developing on ionic 3 :slight_smile:


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>

selection = "A";
this.selection = value;