2

I have following template

<div id="collage" class="collage">
    <img *ngIf="photos" *ngFor="#photo of photos" src="photo.getUrl()" [width]="photo.width" [height]="photo.height">
</div>

The photos is coming as input to the template. The function photo.getUrl() just returns a string with some image url. The CollageComponent looks like:

import {Component, OnChanges, Input} from 'angular2/core';
import {Photo} from 'interfaces/photo';

@Component({
    selector: 'collage',
    templateUrl: 'templates/collage.html'
})
export class CollageComponent implements OnChanges {
    @Input() photos: Photo[];

    ngOnChanges(change) {
        if ('photos' in change && change.photos.currentValue) {
            jQuery('#album-collage').collagePlus({
                'fadeSpeed': 2000,
                'targetHeight': 200
            });
        }
    }
}

But in src the value that (obviously) coming is the string literal "photo.getUrl()". What should be done here so that the image's src gets assigned the value returned by the function getUrl().

Mayank
  • 5,454
  • 9
  • 37
  • 60
  • 3
    `[src]="photo.getUrl()"` – Eric Martinez Mar 17 '16 at 19:07
  • I tried that but I was getting this error `EXCEPTION: TypeError: l_photo0.getUrl is not a function in [photo.getUrl() in CollageComponent@1:35]` – Mayank Mar 17 '16 at 19:09
  • No! its `ngFor #photo of photos`. Probably I understand where is the mistake. I think I am creating Photo object by directly assigning json without calling `new Photo` somewhere in the code. I am not sure. If I find I'll update... – Mayank Mar 17 '16 at 19:15

0 Answers0