title: Ngfor doesn't actualize on reloading page (Angular + RXJS)
body: <p>Hi i'm building a chat app with angular for a school project i'm using firebase for my backend and i have an issue with my ngfor.</p>
  <p>For exemple if i reload the page i will see nothing unless i hover my routerlink on my navbar. However sometime it will work after some time on the page without any action</p>
  <p>When i recieve message i need to be on the page to see them ...</p>
  <p>When i reload my page in first time my array is empty this may be what makes the ngfor bug
  <a href="https://i.stack.imgur.com/BOK9s.png" rel="nofollow noreferrer">array on reload</a>.</p>
  <p>I'm using ngOnInit() to subscribe :</p>
  <pre><code>messages: Message[];
    messageSubscription: Subscription;
  
    constructor(private messageService: MessageService, private router: Router) { 
      
    }
  
    ngOnInit(): void {
      this.messageSubscription = this.messageService.messageSubject.subscribe(
        (messages: Message[]) =&gt; {
          console.log(messages)
          this.messages = messages;
        }
      );
      this.messageService.getMessage();
      this.messageService.emitMessage();
    }
  
    ngOnDestroy(): void {
        this.messageSubscription.unsubscribe();
    }
  </code></pre>
  <p>This is my html template :</p>
  <pre><code>&lt;div *ngFor=&quot;let message of messages&quot; class=&quot;message-box&quot;&gt;
      &lt;img [src]=&quot;message.photoURL&quot; class=&quot;profile-picture&quot;&gt;
      &lt;div class=&quot;content-box&quot;&gt;
          &lt;div class=&quot;information&quot;&gt;
              &lt;p class=&quot;username&quot;&gt;{{message.displayName}}&lt;/p&gt;
              &lt;p class=&quot;date&quot;&gt;{{message.createdAt | date: 'short'}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;p class=&quot;text&quot;&gt;{{message.text}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here you can find my service with my getMessage() function and emitMessage():</p>
  <pre><code>  messages:Message[] = [];
    messageSubject = new Subject&lt;Message[]&gt;();
    constructor() { }
  
    emitMessage(){
      this.messageSubject.next(this.messages);
    }
  
    saveMessage(newMessage: Message){
      firebase.database().ref('/message').push(newMessage);
    }
  
    getMessage(){
      firebase.database().ref('/message')
        .on('value', (data) =&gt; {
          this.messages = data.val() ? Object.values(data.val()): [];
          this.emitMessage();
        });
    }
  </code></pre>
  <p>And this is the repo of my project: <a href="https://github.com/Zuxaw/AngularChatApp" rel="nofollow noreferrer">https://github.com/Zuxaw/AngularChatApp</a></p>
  <p>If anyone has a solution I'm interested</p>