Sub class unable to change super class property in typescript

Issue

I know this is probably a silly error or I am expecting something that's wrong, nevertheless I am stumped as to what I am missing here. I am new to typescript and I am trying to optimize my Angular app by doing some inheritance jazz.

So here is what I want to achieve. I have a base component that needs to provide data to one of its drop down boxes but the data is to be provided by a child component (only the child knows what the list values should be based on some login and other criteria). So here is what I did and what I thought would work

export class BaseComponent implements OnInit
{
  public list!: string[]; // this is needed for a drop down in my html

  constructor(protected service: SomeService) { //injecting service for other tasks in super}

  ngOnInit(): void {
    //console.log(this.list) is always empty
  }

  public setList(list: string[]) {
    this.list = list;
  }
}

export class SubComponent extends BaseComponent implements OnInit
{
  constructor(
    service: SomeService,
  ) {
    super(service);
    super.setList(this.service.getDropDownList1());//only sub class which method to call, like xxxList1 or xxxList 2 etc

  }
}

But on my ngOnInit in the super, list is always empty. I just do not understand why? Given that I am explicitly calling super to set a property on super why does this not work? I have been struggling with what I though was a rudimentary issue but I do not see any way around. Can you please help?

Thanks, Ananth

PS : In the super class constr, if I explicitly call

this.service.getDropDownList1()

the list is populated and shows fine in the html. But via the sub class no luck :(

Also putting console.logs in both constructors and onInits, I noticed that base constructor is getting called twice, dont know why that is happening - probably due to my explicit super call????

EDIT 1: Given that I am from a pure Java background, let me see if I can explain my problem with an example from there!

 class Super {
  String superStr = "";

  public Super()
  {
    System.out.println(" in super constr" + this.superStr);

  }

  public void setString(String s)
  {
  this.superStr = s;
  }

  protected void printStr(){
    System.out.println("in printStr of super" + this.superStr);
  }
}

public class Sub extends Super{
  
  public Sub(){
  super.setString("I am sub setting super str");
  }

public static void main(String[] args){
  Sub s = new Sub();
  s.printStr();
}

}

In this case, s.printStr prints the value set in the call to super's setString method. That is what I was expecting to happen in my TS code too. In constr the sub sets the super's list, and on onOnit being called the list will be used to display drop down values. Am I comparing wrongly? Just wanted to make sure I understand this. So would appreciate if you can help me understand what I am getting wrong.

EDIT 2: I am accepting Chris' answer below - his guidance was the most helpful towards me getting a grip on how things work!

Solution

I copied your code into stackblitz and it seems to be working fine.

https://stackblitz.com/edit/angular-ivy-spjlo9?file=src/app/sub/sub.component.ts

Does your html contain the tag for the sub component? In other words, are you sure you're displaying the sub component and not the base component?

Although I do see a discrepency here:

super.setList(this.service.getDropDownList1());

I needed to delete this or I got a compile error

super.setList(service.getDropDownList1());

Alternatively you can label the service as protected like the super. Not sure if that was just a typo while copying.

Answered By - Chris Hamilton