title: How to bind image source to an observable inside an ngFor loop?
body: <p>I am trying to display an image inside an ngFor loop like this :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div *ngFor="let leg of flight.route"&gt;
     &lt;img [src]="getImage(leg.airline) | async" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code> getImage(airlineCode: string): Observable&lt;any&gt; {
       return this.companyLogoService.getLogo(airlineCode);
   }
  </code></pre>
  
  <p>This doesn't work. When this gets executed, all the requests to <code>getImage()</code> seem to interrupt each other and loop infinitely :</p>
  
  <p><a href="https://i.stack.imgur.com/oPtn9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oPtn9.png" alt=""></a></p>
  
  <p>According to <a href="https://stackoverflow.com/a/52612566/6114088">similar threads</a>, a way to handle this is to manually create a template variable holding the observable and then to pass this variable to the <code>[src]</code> tag, but I can't afford to to that because of the ngFor loop.</p>
  
  <p>How can I bind this image source properly ?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The requests to <code>getImage()</code> were not interrupting each other. This behavior was caused by Angular change detection who went crazy because I directly mapped a function call to <code>[src]</code>, which is not supported. The same problem happened with a single image to load.</p>