"private" and "public" in Angular component

If I don’t add private before foo, loadBar, andtext, I believe they are public by default.

export class RandomComponent {
  @Input() foo: string;
  @Output() loadBar = new EventEmitter();
  text: string;
}

Is there any use case when they are public in the component?

For encapsulation/security reason, should I always add private for all of them like below?

export class RandomComponent {
  @Input() private foo: string;
  @Output() private loadBar = new EventEmitter();
  private text: string;
}

Thanks

Solution 1:

There's a lot to say in response to this question, these are the first thoughts that jumped to my mind:

First and foremost, keep in mind that private is only a compile-time construct - it cannot be enforced at runtime (see here and here for relevant discussion). As such, please disabuse yourself of any notions of private being useful in any way for security purposes. That's simply not what it's about.

It is about encapsulation, and when you have a field or method on your component that you want to encapsulate in it, making it clear that it shouldn't be accessed from anywhere else, then you should absolutely make it private: That's what private is for: It signals your intent that whatever you've put it on shouldn't be touched from outside the class.

The same goes for public: It too is a compile-time-only construct, so the fact that class members are public by default, while true, has exactly zero meaning at runtime. But when you have a member that you explicitly intend to expose to the outside world as a part of your class's API, you should absolutely make it public to signal this intent: That's what public is for.

This is all applicable to Typescript in general. In Angular specifically, there are definitely valid use-cases for having public members on component classes: For instance, when implementing the container/component (aka smart/dumb) pattern, with "dumb" children injecting "smart" parents via constructor injection, it's extremely important to communicate your intent about what members on the parent should and should not be touched by the children: Otherwise, don't be surprised when you catch those dumb kids fooling around in their parents' liquor cabinet.

So, my answer to your question:

should I always add private for all of them like below?

is an emphatic no. You shouldn't always add private because in doing so you defeat the purpose of the keyword, because it no longer signals any intent if you put it everywhere: You might as well not put it anywhere.

Solution 2:

@drewmoore provides a good answer in that private/public boils down to intent. But there are a few more things to consider when using injected private values:

• Both typescript (noUnusedLocals) and tslint (no-unused-variable) will report errors if you use @Import() private foo, or constructor(private foo) {}, and only use foo in your template
• AOT wont work:

If we want to emit TypeScript as output of the AoT compilation process we must make sure we access only public fields in the templates of our components**

• It is considered an anti-pattern