Assuming I have the following code:
<img [src]="JwtService.characterImage(enemy)"
class="{{enemy.status}}"
(click)="sidenav.toggle();" style="cursor:pointer">
How I can change this img src asttribute from my components .ts file?
Add a comment
|
3 Answers
Add a imgSrc in your component
class Component {
constructor(jwtService: JwtService) {
this.imgSrc = JwtService.characterImage(enemy);
}
}
<img [src]="imgSrc"
class="{{enemy.status}}"
(click)="sidenav.toggle();" style="cursor:pointer">
3 Comments
TheUnreal
I was wondering if there is any way to access the img
src attribute without declaring a new variable
MeVimalkumar
is it possible to change img src using reference on change event of radio button in Angular2 not in .ts file? @Piyush
MeVimalkumar
@Piyush.kapoor what if img tag in ngFor and I need get image from server by passing name of the file
You could pass a reference of your tag using $event and change it's attribute from your typescript code.
<img (click)="functionInTypeScript($event.target)">
Or if you want to change something in image tag on another event you could do it like this
<img #image>
<button (click)=functionInTypeScript(image)>
and then simply access in typescript code like this
functioninTypeScript(image:any) {
image.src='path to new image';
}
1 Comment
flackjap
This is not correct. With #image you get an ElementRef object, not a direct access to the DOM object ... but of course, the ElementRef has a "nativeElement" property as an accessor to the DOM object. So, it would be: image.nativeElement.src = "path to new image";
Typescript:
getImage(image: any, time: string) {
const t1 = '06:00';
const t2 = '18:00';
if (time >= t1 && time < t2) {
return ('/images/morning.png');
} else {
return ('/images/evening.png');
}
}
HTML :
<img [src]="getImage(this,bettrainList.departureTime)" width="25">
