How to get span value in Angular 4 using onClick event in Angular 4

Question

I am working in an Angular 4 project ,In this I need to get the value which is in the Span tag on Onclick of an Image . I referred some Stackoverflow qustions but nothing is worked for me ...

This is my HTML.

 <div class="col-sm-4">
     <div class="card">
         <div class="card-img-top card-img-top-250 one">
             <img  class="img-fluid" "src="assets/Images/Popular_Products/3.jpg" alt="img1">
             <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" onclick="getProductName()" >
          </div>
          <div class="card-block pt-2">
              <div class="col-sm-12 text-center card-text">
                  <span #Pname> iPhone</span>
                  <br>
                  <br>
                  1500 $
              </div>
          </div>
      </div>
  </div>

This is my .ts file

getProductName(Pname: string) {
      this.http.get(`http://localhost:57036/api/data/CartCount/?ProductName=${Pname}`)
               .subscribe(data => this.res = (data['ITEM_QTY']),
                         error => console.error(error));       
}

When I clicked on the image ,I want to get the value in the span tag and pass it to the API ,but in my case I can't get the span value . I am new to Angular4 please guide me to solve this .

How do you put `iPhone` in that `span`? Can't you use a variable? — Bunyamin Coskuner, Mar 27 '18 at 06:48

Ketan Akbari · Accepted Answer · 2018-03-27T08:50:38.047

2

You can do something like this:

In MarkUp:

<div class="col-sm-4">
    <div class="card">
        <div class="card-img-top card-img-top-250 one">
            <img  class="img-fluid" src="assets/Images/Popular_Products/3.jpg" alt="img1">
            <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >
        </div>
        <div class="card-block pt-2">
            <div class="col-sm-12 text-center card-text">
                <span #Pname> iPhone</span>
                <br>
                <br>
                1500 $
            </div>
        </div>
    </div>
</div>

In Component:

getProductName(Pname: any) {
    console.log(Pname.textContent)
}

edited Mar 27 '18 at 08:50

answered Mar 27 '18 at 07:06

Ketan Akbari

10,837
5
31
51

I want to take the span value by click on image only – Mar 27 '18 at 07:07
Ketan Akbari ,by using your suggestion I got "Undefined" as the output – Mar 27 '18 at 07:41
the Image and the span tag's are in the different Div then how can I wrap the div's by span – Mar 27 '18 at 07:50
@SivaM maybe yo ushould try my answer ? – Mar 27 '18 at 07:53
@KetanAkbari ,Thanks a lot – Mar 27 '18 at 08:56

score 0 · Answer 2 · 2018-03-27T07:54:55.417

<img routerLink="/my-cart" class="..." src="..." onclick="getProductName()" >

First, add a closing slash to your image tag. Every tag should be closed.
Second, you're using Angular. If you want the Angular context, use the Angular syntax.
Third, you can't have a routeLink and a click handler on your image. Well, you can, but you will experience odd behaviors.

Here is your updated image.

<img class="..." src="..." (click)="getProductName()" />

Now, you can get the span value, and route to your route.

getProductName() {
  const productName = this.Pname.nativelement.innerText;
  // Do what you want here, then route :
  this.router.navigate(['/my-cart']);
}

Remember to import the required dependencies, declare them in your constructor, and as class members.

import { Router } from '@angular/router';
import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('Pname') Pname: ElementRef;

constructor(private router: Router) {}

Guess again on that img tag needing to be closed: https://stackoverflow.com/questions/23890716/why-is-the-img-tag-not-closed-in-html/23890817 ;) — Charlie, Mar 27 '18 at 07:28
It doesn't say it's forbidden, only that it's allowed. And closing it will give good practice for other inlnie tags. But thank you for that, didn't know ! — , Mar 27 '18 at 07:33
@SivaM your code doesn't show that. Did you try what I said, and does it work ? — , Mar 27 '18 at 07:54

score -2 · Answer 3 · answered Mar 27 '18 at 07:16

-2

You need to modify somethings here:

Click event of angular as:

<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >

Function as:

getProductName(Pname: string) {
      let spanContent = <HTMLSpanElement>Pname.innerHTML;      
}

answered Mar 27 '18 at 07:16

amansinghgusain

764
5
17

1 - You have no reference to Pname 2 - If you take his reference, it's an ElementRef object. 3 - If it's an ElementRef object, you don't have the innerHTML property 4 - you convert text to an HTMLSpanElement – Mar 27 '18 at 07:53
Please see the code first, you can see i am passing Pname as the argument in the method, then ensuring that it must be a span, it is then casting it to HTMLSpanElement and FYI it is the working code, I can share the plunkr if you say so? – amansinghgusain Mar 27 '18 at 08:11
return "Undefined" – Mar 27 '18 at 08:18
while debugging let spanContent = Pname.innerHTML; this line I got "iPhone" in innerHTML but hover on spanContent it's undefined – Mar 27 '18 at 08:22
Hover On? Do you want mouseover event or click event? – amansinghgusain Mar 27 '18 at 08:26
I mean in debugging mode hover on those lines ...please check the above image – Mar 27 '18 at 08:32

How to get span value in Angular 4 using onClick event in Angular 4

3 Answers3