Unable to access/get value of abstract (base) class properties from derived class - TypeScript

Question

I have 2 classes - one is abstract and another class is extending it. In ABSTRACT class I have some public/protected properties which ARE initialized in constructor. Let it be abstract Parent and Child extends Parent

Questions:

1. Why, when I am trying to get value of the properties of abstract class like: super.somePropertyOfParent it is always UNDEFINED, but when I call it like: this.somePropertyOfParent it HAS value? Logically, super constructor is always called first, so these fields should be initialized first of all.

2. I have 2 BehaviourSubjects (countryValue, languageValue) in my Parent abstract class, which are initialized with some 'initial value' in constructor. In Child class in OnInit method (which obviously called after Parent constructor) I am subscribing to Parent's BehaviourSubjects like: this.countryValue.subscribe(...) and it receives the 'INITIAL' value. Then in Parent's class ngOnChange method calls subject.next(...), but Child doesn't receive new value...why?

PS if make BehaviourSubject properties STATIC and refer to the ClassName.property - everything works fine.

Please see code below:

@Directive()
export abstract class IbCustomElementComponent implements OnChanges{

  @Input('data-country') country = '';
  @Input('data-language') language = '';

  public countryValue:BehaviorSubject<string>;
  public languageValue:BehaviorSubject<string>;

 

  protected constructor(public translateService: TranslateService) {
    this.countryValue = new BehaviorSubject<string>('initial');
    this.languageValue = new BehaviorSubject<string>('initial');
  }

  abstract customElementReady(changes: SimpleChanges): void;

  ngOnChanges(changes: SimpleChanges) {

    if (this.country && this.language) {
      this.translateService.use(this.country.toLocaleLowerCase() + '-' + this.language);
      this.customElementReady(changes);
      this.countryValue.next(this.country);
      this.languageValue.next(this.language);
    }
  }
}

---

export class CustomerCardsComponent extends IbCustomElementComponent implements OnInit {


  displayedColumns: string[] = ['fieldName', 'value'];

  CARD_DATA: CardData[][] = [];

  dataSource = this.CARD_DATA;

  cards: Card[] = [];

  currentCustomer : Customer = new Customer();


  constructor(private customerListService: CustomerListService, public override translateService: TranslateService) {
    super(translateService);
  }

  ngOnInit(): void {
    this.countryValue.subscribe(c=>{
      this.currentCustomer.bic = Bic[c.toUpperCase()];
      if(this.currentCustomer.bic){
        this.getCustomerCards(this.currentCustomer)
      }
    })
  }
}

Answer 1

Firstly, the reason you can't call super.somePropertyOfParent is because your abstract class isn't initialised separately from your derived class — your derived class simply inherits all of the properties from the abstract class. That is why you call this and not super .

For the ngOnChanges side of things, I believe what's happening is your abstract class' method isn't called because, as far as I understand, Angular components/directives are annoying when it comes to inherited lifecycle hooks. I know I've had issues with OnInit and OnDestroy in the past.

I would try implementing OnChanges in your derived class as follows:

ngOnChanges(changes: SimpleChanges) {
  super.ngOnChanges(changes);
}

Thus you only use super when referring to the parent class' implementation of a method, and not for any properties which your child class automatically inherits.