I am facing a peculiar issue that I have yet to unravel. My goal is to display a textbox component in Angular 2, where you can input a message, specify a button label, and define a callback function that will be triggered upon button click.
Below is the code for my component:
@Component({
selector: 'text-box',
templateUrl: './textbox.component.html',
styleUrls: ['./textbox.component.styl']
})
export default class TextBoxComponent implements AfterViewInit {
content: String;
btnCaption: String;
callback: () => void;
constructor(@Inject(TextBoxService) private service: TextBoxService) {
}
ngAfterViewInit(): void {
this.service.init(this.show);
}
public show(message: String, btnCaption: String, callback: () => void) {
this.content = message;
this.btnCaption = btnCaption;
this.callback = callback;
// (1)
// set opacity 1
}
public btnOnClick() {
// (2)
this.callback();
this.dismiss();
}
public dismiss() {
// set opacity 0
}
}
Since components are Singletons and cannot be directly injected, invoking show() on the component from an external source is not straightforward. Therefore, I implemented a service and stored a reference to the method within it (refer to the component's ngAfterViewInit() method):
@Injectable()
export default class TextBoxService {
private showCallback: (m: String, b: String, c: () => void) => void;
public init(showCallback: (m: String, b: String, c: () => void) => void) {
this.showCallback = showCallback;
}
public show(message: String, btnCaption: String, callback: () => void) {
this.showCallback(message, btnCaption, callback);
}
}
The service is invoked by another service in the following manner:
this.textBoxService.show(
'Do you wish to apply for a loan?',
'Yes', () => {
target.activate();
this.activatedEvents.set(event, target);
this.inputService.loanInput.amount = target.getPrice() - target.getLiquidFunds();
this.inputService.loanInput.startDate = date;
});
However, when the button above is clicked, the text does not update, and the listener attached to the button raises an error saying
this.callback() is not a functioncontent, btnCaption, and callback are appropriately assigned, but at point (2), these members are undefined!
I attempted switching from fat arrow syntax to function() syntax without success. Even hard-coding the string inside show() did not resolve the issue of it being undefined during button click.
It appears that there might be two different objects accessed at points (1) and (2). I am puzzled as to what could be causing this behavior. Any suggestions?