How to change src image when click button in Angular 9

Question

I made 4 buttons with different background colors and I'm trying to make functionality when some of the buttons are clicked to change the image of the phone with the correct color. I've no idea how should I do it, I've tried for 5 hours and still nothing. Here are my html buttons, the logic in the methods are empty. Thank you!

          <button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                  (click)="gold()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                  (click)="silver()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                  (click)="midnight()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                  (click)="spacegrey()"></button>

even you can do all in .html: <button (click)="img='./assets/golden.jpg'">golden</button> — Eliseo
– Eliseo, Commented May 12, 2020 at 9:06

Hien Nguyen · Accepted Answer · 2020-05-12 09:38:39Z

You can use <img [src]="image" /> as

HTML

<button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                  (click)="gold()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                  (click)="silver()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                  (click)="midnight()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                  (click)="spacegrey()"></button>

<img [src]="image" />

TS

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  image: any =
    "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTEVY7_oYz24UXM4Z15YgKhX21F-aTUBm9xR46tLgj2Ox4Mkh_w&usqp=CAU";
  gold() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTMXgK3LAKOoot-wUnzrUFPg2q4A__PbvoxKBE-iJKZOFcRKqsl&usqp=CAU";
  }
  silver() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ1gx9WC3BVjG4KYK1v8b2uBPjpughgJpYrJhIsHxbav8DPAMy-&usqp=CAU";
  }

  midnight() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR3CIz-oYt40ekYXw7CLGLfePl3B9Y5CWJW8-SZ7AZ9_WqWDSuQ&usqp=CAU";
  }

  spacegrey() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTuM7Ws8HBB1gyxb_fAmT9_k75SFH4dT2y4UcIll60HtL1F6pJQ&usqp=CAU";
  }
}

Demo https://stackblitz.com/edit/angular-ivy-aqthqc

it's working thx, what about if I've another product like Samsung S10 and want to change the S10 image, how I can manipulate it depend of the phone, any idea?

Vikas Keskar · Accepted Answer · 2020-05-12 02:46:05Z

1

You can use two way binding of angular, so just set [src] to image and update image url from function calls.

<img [src]="image">

Where image will be defined in your ts file and will be updated with image source in those specific functions.

answered May 12, 2020 at 2:46

Vikas Keskar

1,24810 silver badges18 bronze badges

Comments

iman madani · Accepted Answer · 2020-05-12 03:23:20Z

Html:

  <button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                      (click)="changeColor('palegoldenrod')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                      (click)="changeColor('silver')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                      (click)="changeColor('darkslategrey')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                      (click)="changeColor('grey')"></button>

                      <img [src]="img" width="100px" height="100px">

Ts:

  img='url/palegoldenrod.jpg';
changeColor(color){
this.img=`url/${color}.jpg`;
}

Collectives™ on Stack Overflow

How to change src image when click button in Angular 9

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related