Angular UpgradeComponent with name binding

Question

I'm using the UpgradeComponent to use an AngularJS component in Angular 5. The AngularJS component has a binding called "name" which conflicts with a private variable on the UpgradeComponent.

Is there an easy way around this?

Answer 1

Unfortunately, it looks like there is not a simple solution to this.

Typescript prevents you from accessing private properties on parent classes. Getting around that would break the purpose of setting the variable to private. If you change the name property on your child class to private as well, the warning changes to 'Types have separate declarations of property "name"'. They're preventing that from happening because in the compiled code, you always get the properties declared on the child class first - if you provide your own value in the child class, you do not get access to the value that you would have had if you instantiated the base class.

In this particular case, the UpgradeComponent is using the 'name' property to store the selector name that you pass to the super() call in the constructor. Overriding this with your own local property after the fact could potentially cause unwanted behavior. So, to prevent this, the Angular team is marking that variable as private so you can't override it.

Here's a Typescript Playground to use to see what actually happens in the compiled code: Playground

In this case, I think your best bet is to create a new property on the Angular 1.x component that you can use as an alias to the name property that you cannot override.