How to get values from component in displaywith property of mat-slider
"this" in your formatRateLabel function is pointed to the slider not your component itself.
So, you need to tell it what "this" should be. The simplest solution is to
- change your
formatRateLabelin your .ts file to be a functional such as
formatRateLabel = (v: boolean) => {
return (value: number) => {
var myLocalVariable = v;
... // Do something
}
}
- change your
formatRateLabelin your .html file to be
[displayWith]="formatRateLabel(someProperty)"
so that this variable someproperty can be passed into your function.
You have few ways to fix this issue but the simplest and most appropriate solution to fix this issue is by using function expression. Simply redefine the formatRateLabel in the following way.
formatRateLabel = (value: number) => {
var myLocalVariable = this.someProperty;
}
Hopefully this should work.
As I found, the really easiest way is add this code to the constructor function of your component:
this.formatLabel = this.formatLabel.bind(this);
then your function will be applied with right this linked.