Receiving messages

Author: kum-deepak

src/app/messages/messages.component.html

@@ -3,6 +3,6 @@
     <h2>Received messages</h2>
     <ol>
         <!-- we will use Angular binding to populate list of messages -->
-        <li class="message">message</li>
+        <li class="message" *ngFor="let message of receivedMessages">{{message}}</li>
     </ol>
 </div>

src/app/messages/messages.component.ts

@@ -1,16 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { RxStompService} from '@stomp/ng2-stompjs';
+import { Message } from '@stomp/stompjs';
 
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.component.html',
   styleUrls: ['./messages.component.css']
 })
 export class MessagesComponent implements OnInit {
+  public receivedMessages: string[] = [];
 
   constructor(private rxStompService: RxStompService) { }
 
   ngOnInit() {
+    this.rxStompService.watch('/topic/demo').subscribe((message: Message) => {
+      this.receivedMessages.push(message.body);
+    });
   }
 
   onSendMessage() {

src/app/my-rx-stomp.config.ts

@@ -23,6 +23,7 @@ export const myRxStompConfig: InjectableRxStompConfig = {
 
   // Will log diagnostics on console
   // It can be quite verbose, not recommended in production
+  // Skip this key to stop logging to console
   debug: (msg: string): void => {
     console.log(new Date(), msg);
   }