Change image when button with click function is clicked angular

Question

I am trying to change an image using Angular when a button is clicked. I already have the function change text on the page, but am failing to figure out how to change an image. Each function would have a different image associated with it. I have tried a few variations of this.imgsrc in function but none seem to work. Edit: I am trying to have a message and an image displayed in two different spots when the button is clicked. The message from the code below is displayed at the top and the image I would like displayed would be on the right.

 <div>{{clickMessage}}</div>

 <button (click)="onclick1()" class="button">1</button>
 <button (click)="onclick2()" class="button">2</button>
 <button (click)="onclick3()" class="button">3</button>
 <button (click)="onclick4()" class="button">4</button>
 <button (click)="onclick5()"class="button">5</button>

Component code

export class ChangeStratComponent implements OnInit {
clickMessage = '';
constructor() { }
ngOnInit() {
}
onclick1() {
this.clickMessage = 'click 1';
}
onclick2(){
this.clickMessage = 'Click 2';
}
onclick3() {
this.clickMessage = 'Click 3';
}
onclick4() {
this.clickMessage = 'Click 4';
}
onclick5() {
this.clickMessage = 'Click 5';
}

}

I should clarify I would also like the text to be displayed as well as a picture — Mike D
– Mike D, Commented Jul 24, 2018 at 15:42

Iogui · Accepted Answer · 2021-06-04 06:13:31Z

3

This should help https://stackblitz.com/edit/angular-scm9cy. I refactored a little bit repeatable code using "*ngFor". Component:

    export class ChangeStratComponent {
      imageSrc = '';
      messageText = '';
    
      imageButtons = [
        {
          src: 'photo-src',
          name: 'image-1'
        },
        {
          src: 'photo-src',
          name: 'image-2'
        },
        {
          src: 'photo-src',
          name: 'image-3'
        }
      ]
    
      constructor() {
      }
    
      onClick(imageNameObject) {
        this.imageSrc = imageNameObject.src;
        this.messageText = imageNameObject.name;
      }
    }

HTML:

<img src="{{imageSrc}}">
<div>{{messageText}}</div> 
<button *ngFor="let imageButton of imageButtons; let i = index" 
         (click)="onClick(imageButton)" class="button">{{i}}</button>

edited Jun 4, 2021 at 6:13

Iogui

1,7281 gold badge21 silver badges34 bronze badges

answered Jul 24, 2018 at 15:30

Undernerd

314 bronze badges

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

4 Comments

Kyle Over a year ago

You should post the code in the answer and include the link instead of just posting the link

Mike D Over a year ago

So this is pretty close, is there a way to do it where I can still keep the text from my click as well. My goal is to have text and picture change.

Mike D Over a year ago

So I hate to be a pain I'm being to vague, I have buttons that are currently labeled. With those Click 1, Click 2, etc. The message changes at the top of the screen and the images changes on the right hand side. So I'm just trying to follow your comment if I am trying to leave my buttons labeled, and have the message displayed at top and image on side. I greatly appreciate your help with this! :)

Mike D Over a year ago

Thank you for your help! Using your example I was trying to do this only using the app.component.ts and the app.component.html in the app folder. is this Possible?

Collectives™ on Stack Overflow

Change image when button with click function is clicked angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related