After creating multiple variables and accessing them in their respective templates or HTML files, I've realized that having all variables set as public can be problematic. I want to convert these public variables to private, but when I do so, I receive errors stating that private members cannot be utilized outside of the class. While this conceptually makes sense, it brings up the question of why I can't access private variables created in the TypeScript file from the corresponding template or HTML file within the same component.
If TypeScript files and HTML/template files are considered separate entities, how can I go about accessing private variables in the HTML?
My development is based on TypeScript.
- I've converted public variables to private in the TypeScript file.
- Now, I want to use private variables within the HTML of the same component.
Example in test.component.ts:
public myVar = 'iCreatedThisVariable';
convert to
private myVar = 'iCreatedThisVariable';
Example in test.component.html:
<p>{{myVar}}</p>
It should be possible to use private variables in the HTML if both the TypeScript file and HTML belong to the same class.
If they are indeed separate, how can I go about accessing private variables in HTML using Angular 2+?