Currently, I am working on an angularJS typescript application where I am trying to retrieve a color from a color picker. While I am successfully obtaining the value from the color picker, I am facing difficulty in binding this color as a background to my div element. Below is a snippet of my ts file:
class UserDefinedElementTypeController {
public mycolor: string = "#f0f0f0";
constructor(private $scope: ng.IScope) {
this.watchForcolorChanges();
}
private watchForcolorChanges() {
this.mycolor = "#0f0f0f";
this.$scope.$watch(() => this.mycolor, function (newVal, oldval) {
console.log(oldval, newVal);
this.divStyle = {
'background-color': newVal
}
});
}
}
mainAngularModule.controller("userdefinedelementtype", UserDefinedElementTypeController);
Here is the HTML Code that corresponds to the above TS logic:
<input type="color" ng-model="UDETController.mycolor" />
<div ng-style="UDETController.divStyle">Testing for background color </div>
Do you see any potential issue or missing piece in the provided code?