How do i get html element values?

Hey guys, i will try to explain this as detailed as i can. I have two ion lists that are clickable. Once i click on the ion-item in first ion-list, second ion-list gets opened. What i want is to get Label of ion-item in the first ion-list that i clicked on and put it as title in second ion-list.

Why do i want this?
I have street names in my app listed, once i click on street names, it needs to show all the users in that street and name that list with a name of street that user clicked on. I hope this makes sense to you.

1 Like

I am not sure whether the approach you are taking to do what you are trying is the best or not, but probably you need to use ‘Template reference variables’ and/or the @ViewChild decorator.

1 Like

Any example? I never heard of it.

Check these out.

Template Reference Variables:


1 Like

Here is an example for illustration purposes, please know that I have coded this just so you understand how template variables and @ViewChild actually work.

Suppose this is the item markup in your template:

   <ion-label #mylbl>Username</ion-label>

Now you can access the label text like this in your component code:

import { ElementRef } from '@angular/core';
@ViewChild('mylbl') mylblRef: ElementRef;

This will output ‘Username’ in the console.


This is exactly what i need! But the problem is that text label that i save is on one page and i want to show it into next page. This label is inside ngFor and data is not always the same, it’s dynamic, so i need the exactly same text from first page shown in second page. Like: imagine streets list, you click on street name Heart Boulevard and it send you to another page that should automatically be named inside the title Heart Boulevard. Damn i hope this makes sense :smiley:

Hey, perhaps you can simply use the NavController for this. It has a push method that takes the destination page as the first parameter and the second parameter can be an object having the data you want to transfer there. You can use NavParams to get hold of the data in the destination page.

Check this out for an easy example:

1 Like

i did it like that:
first list(html):

 <ion-list class="searchbarLst" *ngIf="this.localSearch.showListAcc">
                <ion-item class="lisItems" *ngFor="let item of this.localSearch.myListAcc" (click)="itemClicked(item, 1)">
                    <ion-icon item-left primary ios="ios-leaf" md="ios-leaf"></ion-icon>
                    <ion-label class="queryLabel"><span style="font-size: 10px;">{{"STOCKEDIT.CODE" | translate}}:{{ item.AccountsCardsID }}</span><br><span>{{ item.AccountsCardsName }}</span></ion-label>
                    <!--<div item-content detail-push>bye</div>-->


itemClicked(item, num) {
this.myVal =;

and in the second list use this myVal and you have exactly what you want with binding.

about the pages problem:
create a ts file called globalWhateve.ts (will be your service),
put it in the app providers , and import it in every page you need it and define it in the constructor.
and then use it:
if you need more help write here
try also this:

hope it helped;

1 Like