как работает наследование в angular?

Несильно разбираюсь в синтаксисе angular, но видимо это работает так:

1) Срабатывает конструктор производного класса, там эта переменная инициализируется.
2) После чего срабатывает ngInit базового класса, там она выводится в консоль.

Ничего удивительного в таком поведении не вижу.

В обоих есть переменная listType. но инициализируется она только в наследнике

Вообще не инициализируемые переменные это плохо.

У меня этот пример вообще не собрался:

ERROR in solution.ts
(8,5): Member 'listType' implicitly has an 'any' type.

ERROR in solution.ts
(8,5): Property 'listType' has no initializer and is not definitely assigned in the constructor.

this указывает на instance класса, а не на класс, поэтому всё работает как ожидалось. Это нормально для ООП.

Это нормально для ООП.

а не могли бы вы помочь с примером? я попытался воспроизвести ту же ситуацию на нативном JS, но не смог добиться того же поведения. вот моя попытка: https://jsfiddle.net/ytn3o5kd/8/

Это ни разу не та же ситуация. Во-первых, ты обращаешься к переменной chel_ до определения. Во-вторых, не передаёшь аргументы в super(), отсюда и undefined в свойстве (но оно присутствует! можешь в Object.keys проверить)

Если упростить, TypeScript-код из вашего примера выглядит так:

class Parent {
  x: any  // *

  constructor() {
    console.log('parent constructor')
  }

  method() {
    console.log(`this.x is ${this.x}`)
  }
}


class Child extends Parent {
  x: string  // *

  constructor() {
    super()
    console.log('child constructor')
    this.x = 'X'
  }
}


const c = new Child()
c.method()

Видим предсказуемый результат:

parent constructor
child constructor
this.x is X

На нативном JS всё то же самое, за исключением объявления типов. Можете удалить строки, отмеченные *, и сами убедиться.