Angular2 - should private templates be available in the template?

Question

If a variable is declared private in the component class, should I have access to it in the template of this component?

 @Component({ selector: 'my-app', template: ` <div> <h2>{{title}}</h2> <h2>Hello {{userName}}</h2> // I am getting this name </div> `, }) export class App { public title = 'Angular 2'; private userName = "Test Name"; //declared as private } 

Answer 1

No, you should not use private variables in your templates.

So far I like the drewmoore answer and see in it the perfect conceptual logic, otherwise it is wrong. Templates do not exist in component classes, but outside of them. Check out this repo for proof.

The only reason this works is because the TypeScript private keyword does not make the user private. Just-in-Time compilation takes place in the browser at runtime, and JS does not have the concept of private members (yet?). The loan goes to Sander Elias in order to put me on the right track.

When compiling ngc and Ahead-of-Time, you will get errors if you try to access the private members of the component from the template. Repeat the clone demo, change the visibility of MyComponent members to personal, and when you run ngc you get compilation errors. There is also an answer for compiling Ahead-of-Time.

Answer 2

Edit: this answer is now incorrect. There were no official instructions on this topic when I published them, but as @Yaroslov explained (excellent and correct) the answer is no longer the case: Codelizer now warns and AoT will not compile when referencing private variables in component templates . However, at the conceptual level, everything here remains valid, so I will leave this answer as it seems useful.

---

Yes, it is expected.

Keep in mind that private and other access modifiers are Typescript constructs, while Component / controller / template are angular constructs that Typescript knows nothing about. Access modifiers control visibility between classes: creating a private field prevents other classes from accessing it, but templates and controllers are things that exist inside classes.

This is not technically true, but (instead of understanding how classes relate to decorators and their metadata), it may be useful to think about it this way because the important thing (IMHO) is to move from thinking about the template and as separate entities, considering them as single parts of the Component is one of the main aspects of the ng2 mental model.

Thinking about it this way, obviously, we expect that the variables of the private class in the component class will be visible in its template, for the same reason we expect that they will be visible in the private methods of this class.

Answer 3

Although the sample code points to a TypeScript question, it does not have typescript . Angular2 is also available for Dart, and this is a significant difference with Dart.

In Dart, a template cannot refer to private variables of a component class, because Dart, unlike TypeScript, effectively prevents private members from accessing from the outside.

I still support @drewmoores' suggestion to think of a component and its template as a single module.

Update (TS) It seems that offline compilation access for private objects will become more limited in Angular2 TS, and https://github.com/angular/angular/issues/11422

Answer 4

Private variables can be used in the component template. See angular2 cheat sheet for guidance: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter

A more detailed explanation of public / private class members in typescript can be found here: https://www.typescriptlang.org/docs/handbook/classes.html .

All participants are public by default. Access to open elements is carried out from outside the component class along with an instance of the class. But access to private members is possible only within class functions.

Answer 5

A workaround could be to use private variables in the ts file and use getters.

 private _userName = "Test Name"; get userName() { return this._userName; } 

This is a good approach because the ts and html files remain independent. Even if you change the variable name _userName in the ts file, you do not need to make any changes to the template file.

Answer 6

Short answer: no, you should not have access to the private elements from the template, since it is technically separate from the TS file.