I have encountered an issue with my method involving a subscription to an event from a pub sub messaging service. The problem arises when I attempt to define a class property within the callback function, only to find that the property returns as undefined. I am aware that the reference to 'this' has changed from the class to the method scope. However, I require access to the class's 'this' property in order to successfully assign the value to the class property 'this.icon' within my callback method. How can I achieve this task?
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'
import { Events } from '../shared/messages/events';
import { MessageService } from '../shared/messages/message.service';
export class Component implements OnInit, OnDestroy {
public icon: string;
private subscription: Subscription;
constructor() { this.btnClickSubscribe();}
private btnClickSubscribe(): void {
this.subscription = this.messageService
.subscribe(Events.btnClick, (payload) => {
this.icon = 'fa-trash-o';
console.log(this.icon) //logs the correct value, 'fa-trash-o'
//however, it is only accessible within this context. I require it to be available in the class context
});
}