title: Restructure code to avoid Angular Change Detection Infinite Loop
body: <p>My model has a one to many relationship between <strong>Post</strong> and <strong>Img</strong>s i.e. each Post has a number of <strong>Img</strong>s. One of the simplified ways of displaying this structure would be: </p>
  
  <pre><code>&lt;ul&gt;
     &lt;li *ngFor="let post of posts"&gt;
       {{post.postId}} 
        &lt;p  *ngFor="let img of getImgs(post.postId)"&gt;{{img.url}}&lt;/p&gt;
     &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>My problem is that the page goes into an Infinite Loop due to Angular's Change Detection mechanism. Is there a better way to restructure this code? <em>(I'm using <strong>Angular 5</strong>)</em> A simplified version of my code is as below:</p>
  
  <p>My AppComponent looks like:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import {Post} from "./post"
  import {PostService} from "./post.service";
  import {Observable} from "rxjs/Observable";
  import {Img} from "./img";
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [PostService]
  })
  export class AppComponent {
    title = 'app';
    posts : Post[];
    constructor(private postService: PostService) { }
    ngOnInit(): void {
      this.getPosts();
    }
  
    getPosts(): void {
      this.postService.getPosts().subscribe(posts =&gt; this.posts = posts);
    }
  
    getImgs(postId : string) : Img[] {
      var retImgs : Img[];
      this.postService.getImgsByPostId(postId).subscribe( imgs =&gt; retImgs = imgs);
      return retImgs;
    }
  }
  </code></pre>
  
  <p>I get <strong>Post</strong>s and <strong>Img</strong>s from a Web Service. The <strong>Post</strong>s do not contain the <strong>Img</strong>s as part of themselves, but the <strong>Img</strong>s are retrieved using the <strong>postId</strong>. If I would like to keep this model where the <strong>Img</strong>s are not part of the <strong>Post</strong>s, I find it difficult to store the <strong>Img</strong>s in the <code>AppCompnent</code>. This forces me to put the <code>getImgs()</code> call in the HTML Template, which gets called on every Change Detection event. What is the normal way in Angular 5 to handle this scenario? </p>
  
  <p>I can ofcourse do some hacks to save/cache the output of <code>getImgs()</code>, so I don't need to call the Web Service for subsequent requests or I could just change my model, but I am wondering how this is normally done. </p>
  
  <p>Is there anyway to call a method from the Template such that it does not get called on every change detection mechanism?</p>
  
  <hr>
  
  <p><strong>Edit</strong>
  In Response to @<strong>Floor</strong>s suggestion to use a smarter <code>getImgs()</code> that would cache the Images in a <code>Map</code> I have tried the following <code>AppComponent</code>: <em>(The Imports and the Component Decorator are as above)</em></p>
  
  <pre><code>export class AppComponent {
    title = 'app';
    posts : Post[];
    postIdToImgs : Map&lt;string, Img[]&gt;;  //Added
    constructor(private postService: PostService) {
      this.postIdToImgs = new Map&lt;string, Img[]&gt;();  //Added
    }
    ngOnInit(): void {
      this.getPosts();
    }
  
    getPosts(): void {
      this.postService.getPosts().subscribe(posts =&gt; this.posts = posts);
    }
  
    getImgs(postId : string) : Img[] {
      var retImgs : Img[];
      console.log(`Call to getImgs(${postId})`);  //Added
      if(this.postIdToImgs.has(postId)) {    //Added
        console.log('Found value in Cache');  //Added
        retImgs = this.postIdToImgs.get(postId);  //Added
        return retImgs; //Added
      }  //Added
      this.postService.getImgsByPostId(postId).subscribe( imgs =&gt; {
      this.postIdToImgs.set(postId, imgs); //Added
      retImgs = imgs;
  });
      return retImgs;
    }
  }
  </code></pre>
  
  <p>Yes, this stops calls to the Backend after the first iteration, but I still get an Infinite sequence of </p>
  
  <blockquote>
    <p>Cal to getImgs(#postId)<br>
    Found value in Cache</p>
  </blockquote>
  
  <p>Where #postId is one of the 10 posts that I have on this page. I'm trying to learn Angular, so I'm not trying to just get this to work. I'm trying to find out:</p>
  
  <blockquote>
    <p><strong>Is there a way to have a method/function in the Template that is not called on every change detection?</strong></p>
  </blockquote>