Change button Image on click

Question

How can I change the image of a button when I click it?

I have a button and at an early stage I want it with an icon, but when I click it (active) and icon is replaced by another.

How can I do this?

Stackblitz

<!-- image1 -->
<a><img src='https://svgshare.com/i/Gwo.svg' title='' /></a>

<p></p>

<!-- image2 -->
<a style="display:none"><img src='https://svgshare.com/i/Gw7.svg' title='' /></a>

ic_paty · Accepted Answer · 2019-12-22 16:11:54Z

3

You can do something like that:

TS file

export class AppComponent  {
  name = 'Angular';
  value = 'https://svgshare.com/i/Gwo.svg'; //default_value

  updateImage() {
    this.value = 'https://svgshare.com/i/Gw7.svg';
  }
}

HTML file

<a><img [src]="value" title='' (click)='updateImage()' /></a>

You can also update the image each time you click on the button not just the first time using the attribute status like this:

export class AppComponent  {
  name = 'Angular';
  value = 'https://svgshare.com/i/Gwo.svg'; //default_value
  status = false;


  updateImage() {
    this.status = !this.status;
    if (this.status) //active status
     this.value = 'https://svgshare.com/i/Gw7.svg';
    else this.value = 'https://svgshare.com/i/Gwo.svg';
  }

}

Hope it helps!

edited Dec 22, 2019 at 16:11

answered Dec 22, 2019 at 15:49

ic_paty

4323 silver badges10 bronze badges

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

1 Comment

ic_paty Over a year ago

I updated the solution to handle also the multi-click case on the image.

Nicholas K · Accepted Answer · 2019-12-22 16:08:30Z

1

You may do so using just one line:

<a><img 
    [src]="toggle ? 'https://svgshare.com/i/Gwo.svg' : 'https://svgshare.com/i/Gw7.svg'" 
    title='' 
    (click)='toggle = !toggle'/>
</a>

answered Dec 22, 2019 at 16:08

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Comments

Rachel Gallen · Accepted Answer · 2019-12-22 15:56:01Z

0

You can update svg attributes on click as well as swapping the image.

For example if you had

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
   <circle id="circle1" onclick='changerect(evt)' r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2" />
 </svg>

You could use js to update the fill, stroke width, opacity etc.. using a function.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 3.5in; height: 1in">
   <circle id="circle1" onclick='changesvg(evt)' r="30" cx="34" cy="34" style="fill: red; stroke: blue; stroke-width: 2" />
 </svg>

<script>
  function changesvg(evt) {
    var svgobj = evt.target;
    svgobj.style.stroke = 'yellow';
    svgobj.style.opacity = 0.5;
  }
</script>

If you wanted to swap images on click you could just use a regular swap image as ic_paty has outlined above.

answered Dec 22, 2019 at 15:56

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

4 Comments

Rachel Gallen Over a year ago

you'd probably only use the js if the images were similar, but still.. good to know..imho

Plochie Over a year ago

Question is regarding angular, so the answer should also be in angular format.

Rachel Gallen Over a year ago

@Plochie I'm sure OP can figure out ng-click on his/her own.. StackOverflow is only meant to be a guide, not a code-writing service after all!

Plochie Over a year ago

IMO, the whole point of answer is to clear the doubts. BTW in angular its (click), and in angularjs it was ng-click. Also angular has classes which does not have function prefix.

Collectives™ on Stack Overflow

Change button Image on click

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related