title: Can`t assign values to object`s properties in Angular service
body: <p>Service has the empty object "message". I assign its property values through "add()" method. Logs show that values are assigned. But when I want to get it from the component directly or through a getter, the properties are still undefined, which is confirmed by the log() method in the getter.</p>
  
  <p>I am new in Angular, as well as in TS, so I guess I don`t see an obvious mistake. Thank you in advance for any help.</p>
  
  <p><em>Message object:</em></p>
  
  <pre><code>export class Message {
    messageText: string;
    messageStatus: MessageStatus;
  }
  </code></pre>
  
  <p><em>MessageStatus enum:</em></p>
  
  <pre><code>export enum MessageStatus {
    INFO,
    SUCCESS,
    ERROR,
    WARN
  }
  </code></pre>
  
  <p><em>Service:</em></p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {Message} from '../../model/message';
  import {log} from 'util';
  
  @Injectable({
    providedIn: 'root'
  })
  export class MessageService {
  
    private message: Message = new Message();
  
    constructor() { }
  
    public add(message: Message): void {
      this.message = message
      log('MESSAGE in add: ' + this.message.messageText +', STATUS in add: ' + this.message.messageStatus);
    }
  
    public getMessage(): Message {
      log('MESSAGE in get: ' + this.message.messageText +', STATUS in get: ' + this.message.messageStatus);
      return this.message;
    }
  
    public clear(): void {
      this.message = new Message();
    }
  }
  </code></pre>
  
  <p><em>Component:</em></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {MessageService} from '../../service/messages/message.service';
  import {MessageStatus} from '../../service/messages/messageStatus';
  
  @Component({
    selector: 'app-messages',
    template: `    
      &lt;div class="message-position" *ngIf="messageService.getMessage().messageText"&gt;
        &lt;div [ngClass]="{
          'alert alert-info': messageService.getMessage().messageStatus === MessageStatus.INFO,
          'alert alert-success': messageService.getMessage().messageStatus === MessageStatus.SUCCESS,
          'alert alert-danger': messageService.getMessage().messageStatus === MessageStatus.ERROR,
          'alert alert-warning': messageService.getMessage().messageStatus === MessageStatus.WARN
        }"&gt;
          {{messageService.getMessage().messageText}}
          &lt;button class="btn btn-primary" (click)="messageService.clear()"&gt;Ok&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;`,
    styleUrls: ['./messages.component.scss']
  })
  export class MessagesComponent{
    constructor(public messageService: MessageService) { }
  }
  </code></pre>
  
  <p>log() output in add(), shows that object properties received values:</p>
  
  <blockquote>
    <p>25 Nov 19:05:22 - MESSAGE in add: Customer not found, STATUS in add: 3</p>
  </blockquote>
  
  <p>log() output in getMessage(), object properties are still underfined:</p>
  
  <blockquote>
    <p>25 Nov 19:05:22 - MESSAGE in get: undefined, STATUS in get: undefined</p>
  </blockquote>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><em>The method that calls add(). Placed in different class:</em></p>
  
  <pre><code>private messageService: MessageService = new MessageService();
  private message: Message = new Message();
  
  logResponce(messageText: string, messageStatus: MessageStatus): void {
      this.message.messageText = messageText;
      this.message.messageStatus = messageStatus;
      this.messageService.add(this.message);
    }
  </code></pre>