Is it okay to mark a @ViewChild as private?

Question

Is it okay to mark a ViewChild as private, if it's not being referenced in the template?

I have been able to do this, then build and serve with the '--prod' flag, and encountered no errors. I'm currently using Angular 7.

@ViewChild(HelloComponent) private helloComponent;

Here's a stackblitz to what I'm talking about:
https://stackblitz.com/edit/angular-vxbpuk?file=src%2Fapp%2Fapp.component.ts

I think I have the stackblitz using aot, but you could verify the same thing locally.

EDIT: I apologize for not bringing this up before, but there's this blurb from the angular doc that give me pause:

https://angular.io/guide/aot-compiler#phase-2-code-generation

Decorated component class members must be public. You cannot make an @Input() property private or internal.

But as @GCSDC already pointed out below, the Angular team seems to be using private members in their examples:
https://angular.io/guide/component-interaction#parent-calls-an-viewchild

Lanugo

It might be worth differentiating, private is OK but an ES class #private field would not be -- see github.com/microsoft/TypeScript/issues/31670 for a big discussion about why they're keeping both – Renferd

Answer 1

It seems that yes, this is ok, as you may find it done also on the official angular fundamentals guides, at:

Components & Templates > Component Interaction > Parent calls an @ViewChild():

@ViewChild(CountdownTimerComponent) private timerComponent: CountdownTimerComponent;

Gorget

Apologies for not mentioning this before, but this blurb from the docs has me concerned: angular.io/guide/aot-compiler#phase-2-code-generation – Lanugo

I got your point, and I also don't know which one should you consider as being right. I suggest you to check for any GitHub discussions about that, and maybe raise an issue on angular repo regarding this. If you do so, please let us know the result. – Gorget

Still waiting on the result of this issue: github.com/angular/angular/issues/27467 – Lanugo

Answer 2

Yes, It's ok to do so. Since this variable scope is confined to component class, we can declare it private and use.

@ViewChild is meant to be used inside the component for interacting with child component, so we can keep it private.

Houstonhoustonia

Answer 3

The private and public syntax is an enhancement for the javascript language for "static analyze" in typescript transpiler, I would recommend you to try the playground how typescript transpiles to JS. So basically it's a way for anyone reading the code get a sense of what the scope is for the variables/functions. Example of a simple variable inside a class would be that they both transpiles into the same JS private var1: number = 0 and public var1: number = 0 transpiles both to this.var1 = 0

However! There could be situations you would actually like to access @ViewChild from a parent component, but in that situation you have to put it as @ViewChild(HelloComponent) public helloComponent; or you will get "compile/transpile" error. If you want to give a more clearer feeling on where the scope would be keep it as private and instead use getters/setters like so:

export class MyComponent {

  @ViewChild(HelloComponent) private _helloComponent;

  get helloComponent(): any {
    return _helloComponent;
  }

  set helloComponent(set: any) {
    this._helloComponent = set;
  }

}

Skycap

Answer 4

This is syntactic sugar you use typescript just make sure to have less errors and to prevent them but in the end all after compling code is transpiling back to javascript. And how you used private keyword above if you use this variable only inside current class it will be fine but if you access this variable in other class on building project and deploy you will get error.

In javascript there are no private or public everything is closure scoped.

Peephole