How to access private properties in a extended Angular Component using a directive?

Issue

I'm working with the PoStepperComponent from the @po-ui/ng-components library in Angular, and I need to extend this component to add custom functionality.

Specifically, I want to create a directive that extends this component and provides access to the private currentActiveStep property.

Here's my directive code:

import { Directive, forwardRef } from '@angular/core';
import { PoStepperComponent } from "@po-ui/ng-components";

@Directive({
  selector: '[appExtendedStepper]',
  providers: [{
    provide: PoStepperComponent,
    useExisting: forwardRef(() => ExtendedStepperDirective) }]
})

export class ExtendedStepperDirective extends PoStepperComponent {

  get currentStepCustom() {
    return this.currentActiveStep;
  }
}

However, I'm encountering the TypeScript error TS2341: Property currentActiveStep is private and only accessible within class PoStepperComponent. Despite extending PoStepperComponent, I cannot access its private property.

What is the recommended approach to extend an Angular component from a third-party library and access or modify its private properties?

I expected that by extending PoStepperComponent with a directive, I would be able to access its private properties or at least override them.

My goal is to create a getter in the directive that returns the current active step. However, TypeScript's encapsulation rules are preventing this.

Is there a workaround or a more appropriate method to achieve this functionality?

PS: I am using Angular v16, and even looked into another question here:

Is there a better way to access Angular's components private properties?

However, this is deprecated since v13. I also read on another question that a user solved it by using AppViewManager, but it is also deprecated on the Angular version I'm using.

Solution

What I would do in this situation:

I would contact the code owners by creating a pull request to their repository changing private to protected with a detailed explanation of why you need to access this private property. Maybe they will include this change in the next release. Alternatively, they may suggest a better solution/workaround to your problem.

In my opinion, that's the only proper way to achieve that. Otherwise, they can just rename this property or remove it and implement it in another way. Because it's private and they do not have any obligations to keep that. Just imagine - your project can get silently broken after the library update. And this change won't be even mentioned in any changelog - it's an internal logic that by design is not exposed to the consumer. I wouldn't want to have this time bomb in my code.

Answered By - alexdefender93