I'm currently in the process of enhancing the functionality of the PoStepperComponent from the @po-ui/ng-components library within an Angular project. One specific requirement is to extend this component to introduce custom features.
The plan entails creating a directive that extends the PoStepperComponent and allows access to its private property named currentActiveStep.
This is the snippet of code for the directive:
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;
}
}
Despite extending the PoStepperComponent in this manner, a TypeScript error surfaces stating
TS2341: Property currentActiveStep is private and only accessible within class PoStepperComponent.Therefore, I seek guidance on the recommended approach for extending an external Angular component and manipulating its private properties effectively.
The main objective is to develop a getter within the directive that can retrieve the current active step. Still, the restrictions imposed by TypeScript's encapsulation rules pose a hindrance.
Could there be an alternative solution or a more appropriate technique to accomplish this desired functionality?
PS: The Angular version being utilized is v16, and attempts were made to explore related inquiries such as:
Is there a better way to access Angular's components private properties?
Regrettably, some approaches mentioned in those discussions, including utilizing AppViewManager, are no longer compatible with the Angular version currently in use.