change src attribute with angular 2 WITHOUT JQUERY

Question

I have this images:

<div class="image-index-container">
                    <div>
                        <img class='index-pics' src="images/yourbag.png" alt="">
                        <p class="activeIndex">Your Bag</p>
                    </div>
                    <hr>
                    <div style="width: 13%">
                        <img class='index-pics' src="images/delivery-gray.png" alt="">
                        <p>Delivery Details</p>
                    </div>
</div>

when I click on one button I want to change the src attribute from images/yourbag to images/yourbag-gray and the img with the src images/delivery-gray to images/delivery.

in addition to remove the class activeIndex from the first text and add it to the second one without using JQuery

rashfmnb · Accepted Answer · 2016-08-05 15:14:09Z

2

do it like this using this [src]="imageUrl"

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <img class='index-pics' [src]="imgsrc" alt="">
    </div>
    <button type="button" (click)="btnClick()">change</button>
  `,
  directives: []
})
export class App {
  imgsrc="http://az866755.vo.msecnd.net/product/1468402190267-product.jpeg"

  btnClick()
  {
   this.imgsrc="http://az866755.vo.msecnd.net/product/1454067764999-product.jpeg" 
  }

  constructor() { }
}

answered Aug 5, 2016 at 15:14

rashfmnb

10.7k4 gold badges38 silver badges46 bronze badges

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

2 Comments

Euridice01 Over a year ago

What if my image has an imgsrc and srcset like: srcset="images/[email protected] 2x, images/[email protected] 3x"? same approach?

rashfmnb Over a year ago

use [srcset] like this

Jorawar Singh · Accepted Answer · 2016-08-05 15:22:34Z

1

Use src="{{path}}" and Angular will update the path. For example

<button (onclick)="path=newpath"><button>

Another example

<div class="col-lg-4">
<h3>Github Users:{{[].concat(users).length}} </h3>
<ul>
  <li *ngFor="let user of users" style="list-style:none">
   <button (click)="data = user" style="cursor:pointer"> <img  src="{{user.avatar_url}}" style="height:200px; width:250px;" /></button>
  </li>
</ul>
</div>
<md-card class="col-lg-8 " *ngIf="data" style="position:fixed; margin-left:22%; margin-top:3.5%">
  <div class="col-lg-4">
  <img  src="{{data.avatar_url}}" style="height:200px; width:250px;" />
  </div>
  <div class="col-lg-8">
{{data | json}}
 </div>
</md-card>

edited Aug 5, 2016 at 15:22

answered Aug 5, 2016 at 15:12

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Collectives™ on Stack Overflow

change src attribute with angular 2 WITHOUT JQUERY

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related