title: *ngFor not showing any data
body: <p>I'm creating a chatting app.  I have a slight problem, <code>ngFor</code> doesnt seem to work for me.</p>
  
  <p>I have 2 components, 1 is the feed which holds the other component which is the message. So feed shows a list of message components.</p>
  
  <p>Feed
  .ts</p>
  
  <pre><code>import { Component, OnInit, OnChanges } from '@angular/core';
  import { Observable } from 'rxjs';
  import { Message } from '../models/message';
  import { MessageService } from '../core/message.service';
  
  @Component({
    selector: 'app-feed',
    templateUrl: './feed.component.html',
    styleUrls: ['./feed.component.css']
  })
  export class FeedComponent implements OnInit, OnChanges {
  
    feed: Observable&lt;Message[]&gt;;
  
    constructor(private msgService: MessageService) { }
  
    getMessages(): Observable&lt;Message[]&gt; {
      return this.msgService.getAllMessages();
    }
  
    ngOnInit() {
      this.feed = this.getMessages();
    }
  
    ngOnChanges() {
      this.feed = this.getMessages();
    }
  }
  </code></pre>
  
  <p>Feed .html</p>
  
  <pre><code>&lt;div class="feed"&gt;
    &lt;div *ngIf="feed | async; then fetched else fetching"&gt;
    &lt;/div&gt;
  
    &lt;ng-template #fetched&gt;
      &lt;div *ngFor="let message of feed$ | async" class="message"&gt;
        &lt;app-message [message]=message&gt;&lt;/app-message&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  
    &lt;ng-template #fetching&gt;
      &lt;h3&gt;Loading...&lt;/h3&gt;
    &lt;/ng-template&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Message .ts</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  import { Message } from '../models/message';
  
  @Component({
    selector: 'app-message',
    templateUrl: './message.component.html',
    styleUrls: ['./message.component.css']
  })
  export class MessageComponent implements OnInit {
  
    @Input() message: Message;
    sender: string;
    body: string;
    createdAt: string;
  
    constructor() { }
  
    ngOnInit(message = this.message) {
      this.sender = message.Sender;
      this.body = message.Body;
      this.createdAt = message.CreatedAt;
    }
  }
  </code></pre>
  
  <p>Message .html</p>
  
  <pre><code>&lt;div class="messageContainer"&gt;
    &lt;div class="messageData"&gt;
      &lt;span class="sender"&gt;
        &lt;p&gt;{{sender}}&lt;/p&gt;
      &lt;/span&gt;
      &lt;span class="createdAt"&gt;
        &lt;p&gt;{{createdAt | date:'medium'}}&lt;/p&gt;
      &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="messageContent"&gt;
      {{body}}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also here is my service which does an API call from my asp.net project.</p>
  
  <p>MessageService .ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import { HttpClient } from '@angular/common/http';
  
  import { Message } from '../models/message';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MessageService {
  
    private readonly baseUrl = 'http://localhost:50169';
  
    constructor(private http: HttpClient) { }
  
    getAllMessages(): Observable&lt;Message[]&gt; {
      return this.http.get&lt;Message[]&gt;(`${this.baseUrl}/api/messages`);
    }
  }
  </code></pre>
  
  <p>I've tried checking the value of the API call and it has value based on the console log.</p>
  
  <p>My problem is it does not show any data on the <code>ngFor</code> of the feed component.</p>