0

I am working in an Angula4 project ,In this I have a hover to change image section ,I have did something like the below code but it is not working for me ,But the same code is perfectly working in (visual studio)other project.

enter image description here

What should I do next or What I have missed in this ...

product.component.html

<div class="col-5">
      <div class="container" >
        <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="assets/Product_Details/Show1.png">
          <img id="sm005" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="assets/Product_Details/Show2.png">
          <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="assets/Product_Details/Show3.png">
          <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="assets/Product_Details/Show4.png">
          <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="assets/Product_Details/Show5.png">
      </div>
    </div>

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">`</script>
    <script>
      $('img[id^=sm00]').click(function () {
          $('#ProductImage').attr('src', $(this).attr('ref'));
      });
    </script>
Improve this question
7
  • why are u using jquery..same can be done in angular Commented Mar 16, 2018 at 6:10
  • use (mouseenter) ="mouseEnter() " event to your image tag Commented Mar 16, 2018 at 6:11
  • I keep the <script></script> in index.html Which is in Angular4 project. Commented Mar 16, 2018 at 6:14
  • no need to do so..i shall create stackblitz to solve ur issue Commented Mar 16, 2018 at 6:15
  • we don't recommend usage of jquery in angular application' Commented Mar 16, 2018 at 6:16

1 Answer 1

Reset to default
2

You can do something like below :

product.component.html

<div class="col-5">
      <div class="container" >
        <img [src]="imageURL" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
      </div>
        <div class="12">
        <div class="row">
          <img id="sm001" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/350x150" alt="img1" class="img-thumbnail" ref="https://via.placeholder.com/350x150">
          <img id="sm005" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/351x151" alt="img2" class="img-thumbnail" ref="https://via.placeholder.com/351x151">
          <img id="sm002" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/352x152" alt="img3" class="img-thumbnail" ref="https://via.placeholder.com/352x152">
          <img id="sm003" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/353x153" alt="img4" class="img-thumbnail" ref="https://via.placeholder.com/353x153">
          <img id="sm004" (click)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" src="https://via.placeholder.com/354x154" alt="img5" class="img-thumbnail" ref="https://via.placeholder.com/354x154">
      </div>
    </div>

Please replace placeholder images with your images.

product.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
  imageURL:string ;

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

Working Demo

Updated code with click event handler

UPDATE

To show default image change your .ts file to :

import { Component } from '@angular/core';

@Component({
  selector: 'my-product',
  templateUrl: './product.component.html',
  styleUrls: [ './product.component.css' ]
})
export class ProductComponent  {
  name = 'Angular 4';
   imageURL:string = "https://via.placeholder.com/500x500"; // change is here

  constructor(){

  }

  mouseEnter(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.ref;
    var value = idAttr.nodeValue;
    console.log(value)
    this.imageURL = value ; //I have binded thisvariable in HTML
  }

  mouseLeave(ev){
    //reset this.imageURL if needed
  }
}

Demo

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

2 Comments

by default want to show an image at the big box...but if I gave [src]="imageURL" this I can't set the another image source...
Can you help me in this stackoverflow.com/questions/49748925/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.