Toggle image src on click

Question

Hi angular community !

I've got an img who's also a button an I would like to change the button/img as following "each time it's clicked show img "arrow_up" , maybe ngClass changing the css?

My button is an arrow down and each time he is clicked I would like it show an arrow up instead like in this website for exemple Angular Blogspot (if you see the blog archive on right, if you click on it the boutton changed..very common thing)

I provide an exemple with [hidden] but maybe there's a elegantest way to do the job:

html:

<img src="./arrow_down_black.png" type="button"
(click)="toggleChild()"/>
<img [hidden]=""showVar" src="./arrow_up_black.png" type="button"(click)="toggleChild()"/>
   <my-child [showMePartially]="showVar"></my-child>

ts:

clickMe() {
   this.showVar = !this.showVar;
}

you description is not clear. What do you actually want to achieve ? — FAISAL
– FAISAL, Commented Aug 10, 2017 at 13:18
@Faisal hi Faisal since this morning ! My button is an arrow down and each time he is clicked I would like it show an arrow up instead like in this website for exemple angularjs.blogspot.fr/2017/03/angular-400-now-available.html (if you see the blog archive on right, if you click on it the boutton changed..very common thing) — Emile Cantero
– Emile Cantero, Commented Aug 10, 2017 at 13:22

FAISAL · Accepted Answer · 2017-08-10 13:38:41Z

5

Use an expression to display the correct image.

<img src="{{ showVar ? './arrow_down_black.png' : './arrow_up_black.png'}}" 
     type="button" (click)="toggleChild()"/>

     <my-child [showMePartially]="showVar"></my-child>

.. and in your component ts file,

toggleChild() {
   this.showVar = !this.showVar;
}

answered Aug 10, 2017 at 13:38

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

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

1 Comment

Emile Cantero Over a year ago

many thanks it works fine .. do you know some tutorial where i could learn how to use this typescript expression? I understand ? = if and : = or but didn't find explantations about it..

Krzysztof Lach · Accepted Answer · 2017-08-10 13:32:44Z

2

I think binding your img css class to the [ngClass] directive will do the job more elegant way.

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

NgClass directive example

edited Aug 10, 2017 at 13:32

answered Aug 10, 2017 at 13:20

Krzysztof Lach

1,3801 gold badge12 silver badges19 bronze badges

3 Comments

Emile Cantero Over a year ago

according to my code in the post, how could you make...I didn't get it..

Krzysztof Lach Over a year ago

@EmileCantero it will look something like that

<img [ngClass]="{'name of css class arrrow up img': showVar, 'name of css class arrrow down img': !showVar}" type="button"(click)="toggleChild()"/>

Emile Cantero Over a year ago

Thanks guys both solutions are working solutions I need to learn more to do disturb you to much

Collectives™ on Stack Overflow

Toggle image src on click

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related