Currently, I am still using ES5 for my frontend Google Apps Scripts application as I haven't had the time to transition to TypeScript. As part of upgrading my Angular1 app to Angular2, I came across this method:
To handle loading states and overlay divs, I created an overlayLoaderService service with functions to manipulate loading state and an overlayLoader component to display the div.
Service:
var overlayLoaderService = ng.core.
Injectable().
Class({
constructor: function() {
this.loading = false;
this.stateChange = new ng.core.EventEmitter();
},
setState: function(state) {
this.loading.value = state;
this.stateChange.emit(state);
},
getState: function() {
console.log(this.loading);
}
});
upgradeAdapter.addProvider(overlayLoaderService);
angular.module('Gojira').factory('overlayLoaderService', upgradeAdapter.downgradeNg2Provider(overlayLoaderService));
Component:
var OverlayLoaderComponent = ng.core
.Component({
selector: 'overlay-loader',
template: '<div [hidden]="loading" id="overlay-loader"></div>',
providers: [overlayLoaderService]
}).Class({
constructor: [overlayLoaderService, function(overlayLoaderService) {
this.loading = !overlayLoaderService.loading.value;
this._subscription = overlayLoaderService.stateChange.subscribe(function (value) {
console.log(value);
this.loading = !value;
});
}],
});
angular.module('Gojira').directive('overlayLoader', upgradeAdapter.downgradeNg2Component(OverlayLoaderComponent));
I am trying to make the component update its loading property when the setState() method in the overlayLoaderService is called. However, the subscription is not triggering, indicating a mistake on my end.
Any assistance would be greatly appreciated.