Using Array of items in Angular

Question

I have some list of items in my database which I am retrieving in form of an array.I am displaying these items as selectables on my page. On clicking a particular, I want to retrieve it's value ( I want to know which item was selected).

Here's the HTML Code :

 <p>Year Wise Medical Records</p>

        <div class="list-group "  *ngFor="let year of years | async">
              
            <a routerLink="records"  routerLinkActive="active" >
                <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>
                
        </div>

Here's how I am retrieving from the database:

this.years=af.list('/years/'+this.name).snapshotChanges();

Here's the image of how the list looks before and after selection of an item":

All the items in the list are being highlighted on selecting any of them. Can someone help me with highlighting only that item which has been selected and print that item value on console through typescript.

Adrita Sharma · Accepted Answer · 2019-11-16 06:50:34Z

2

Try like this:

Working Demo

<a routerLink="records" (click)="activeYear = year.key" [class.active]="activeYear == year.key" >
      <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}
</a>

edited Nov 16, 2019 at 6:50

answered Nov 16, 2019 at 6:44

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

3 Comments

Akhilesh Pothuri Over a year ago

This worked for me! , how can I print the value on console ? the selected item

Adrita Sharma Over a year ago

(click)="activeYear = year.key;getSelectedyear(year.key)"

Adrita Sharma Over a year ago

Added it in the demo

user8331407 · Accepted Answer · 2019-11-16 06:49:01Z

2

you pass index for item

    <div class="list-group "  *ngFor="let year of years; index as i | async">

        <a routerLink="records"  routerLinkActive="active" >
            <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>

    </div>

pass event index create for item target

    <button (click)="deleteItem(i)">delete</button>

answered Nov 16, 2019 at 6:49

user8331407

Collectives™ on Stack Overflow

Using Array of items in Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related