CODEWITHSUNDEEP
angulartypescript
Frank
Frank

Reputation: 2431

Angular Understanding Property Binding

Say I have this in the ts file:

  arrImages = ['Front', 'Back', 'Left', 'Right'];
  Front = "...";
  Back = "...";
  Left = "...";
  Right = "...";
  ChangeImage(pImageView) {
      console.log(pImageView)
  }

And this in the html file:

<ng-container *ngFor="let Item of arrImages">
    <label>{{Item}}</label>
    <img src="{{Item}}">
    <button (click)="ChangeImage(Item)">Change</button>
</ng-container>

The label comes out as <label>Front</label> or <label>Back</label> etc. Which is correct.

The button comes out as <button (click)="ChangeImage('Front')">Change</button> or <button (click)="ChangeImage('Back')">Change</button> etc. Which is correct.

But how do I get the img to come out as <img [src]="Front"> or <img [src]="Back">?? Because I can't get the image src to link with the ts variables. I tried all of these:

<img src="Item">
<img src="{{Item}}">
<img [src]="Item">
<img [src]="'Item'">
<img [src]="{{Item}}">
<img [src]="'{{Item}}'">

Upvotes: 1

Views: 71

Answers (2)

yurzui
yurzui

Reputation: 214007

You can use square brackets notation to pass correct binding:

<img [src]="this[Item]">

Upvotes: 2

Sebastien Servouze
Sebastien Servouze

Reputation: 770

The problem is that arrImages contains only strings that are not correct images path.

Two ways for dealing with this:

First way - Custom pipe

Change arrImages items to valid images path like:

arrImages = ['Front.png', 'Back.png', etc...] (you can remove your other variables)

Then, make a custom pipe to extract image name from image path

@Pipe({
  name: 'extractednamefromfilepath'
})

export class ExtractNameFromFilePathPipe implements PipeTransform 
{
  transform(val:string) : string 
  {
    // Split full path into small chunks of path (img/image.png => ['img', 'image.png']
    var splittedPath = value.split('/');

    // Sub the 4 last char of the last splittedPath chunk ('image.png' => 'image')
    return splittedPath[splittedPath.length - 1]
          .substring(splittedPath[splittedPath.length - 1].length - 4);
  }
}

And use it this way

<ng-container *ngFor="let Item of arrImages">
    <label>{{Item | extractnamefromfilepath}}</label>
    <img src="{{Item}}">
    <button (click)="ChangeImage(Item)">Change</button>
</ng-container>

In ChangeImage function, Item will now be the Path of the image, but you can extract the name from the path with a function similar to the pipe one.

Second way - Class

Make a class like

export class ImageHolder 
{
    imgPath: string;
    imgName: string;

    constructor(imgPath: string)
    {
        this.imgPath = imgPath;
        imgName = extractNameFromPath(imgPath);
    }

    extractNameFromPath(imgPath: string) : string
    {
        // Split full path into small chunks of path (img/image.png => ['img','image.png']
        var splittedPath = value.split('/');

        // Sub the 4 last char of the last splittedPath chunk ('image.png' => 'image')
        return splittedPath[splittedPath.length - 1]
              .substring(splittedPath[splittedPath.length - 1].length - 4);
    }
}

Then make your array like 

arrImgs = [];
arrImgs.push(new ImageHolder('Front.png'), new ImageHolder('Back.png'), etc..);

And use it like

<ng-container *ngFor="let Item of arrImages">
    <label>{{Item.imgName}}</label>
    <img src="{{Item.imgPath}}">
    <button (click)="ChangeImage(Item.)">Change</button>
</ng-container>

In ChangeImage function, item will now be an ImageHolder object.

Hope it helps

Upvotes: 2

Related Questions