CODEWITHSUNDEEP
htmlangularbootstrap-4
Kristiyan Petrov
Kristiyan Petrov

Reputation: 121

How to change src image when click button in Angular 9

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>

1

Upvotes: 1

Views: 4910

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

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

Upvotes: 4

iman madani
iman madani

Reputation: 299

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`;
}

Upvotes: 1

Vikas Keskar
Vikas Keskar

Reputation: 1248

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.

Upvotes: 1

Related Questions