In my component, I'm importing a constant and using it in the logic of my calculations. Both results work, producing the same outcome.
import { GlobalValue } from "src/app/models/constants";
@Component({ ... })
export class SomeComponent implements OnInit {
constructor() { this localValue = GlobalValue; }
private localValue: string = GlobalValue;
ngOnInit() { ...
const result1 = GlobalValue + 0;
const result2 = localValue + 0;
}
}
Then, I wished to use the constant in my HTML too. However, the following produces two different results. The local one works as expected while the reference to the global is empty. The page simply doesn't see the imported constant.
<div>{{localValue}}</div>
<div>{{GlobalValue}}</div>
Is there a way to make the template recognize the imported contant other than declaring/assigning a local proxy for it? How to, alterantively, why not?