Inheritance in angular2

Question

I'm trying to understand inheritance in angular 4.

Below is my AppComponent file:

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';
  myArray= ["1","2","3"]; //THIS WORKS
  //myArray:any; //Declared but not initialized

  setTitle(value:any){
    this.title=value;
    console.log(this.myArray[2]);

  }
  ngOnInit(){
    //this.myArray=["1","2","3"]; //THIS DOESNT WORK

  }
}

This is another component which extends AppComponent

import { Component, blurbs } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  selector: 'app-child',
  templateUrl: `<p>
  title {{title}}
  <button (click)="setTitle('child')">change title</button>
</p>`,
  styleUrls: ['./child.component.css']
})

export class ChildComponent extends AppComponent implements OnInit {

  constructor() {
    super();
   }

  ngOnInit() {
  }

}

In the above code i'm calling the setTitle() method from the ChildComponent.

I have a console log for myArray[2].

The value works fine if i initialize the value while declaring it.

But if i just declare and initialize the array in the ngOnInit block the console.log doesnt work and tells me that myArray[2] is undefined.

I have a similar scenario in my application can anyone guide me what is the right approach and why its doesn't work when i initialize the array in ngOnInit block

Answer 1

ngOnInit method is redefined in ChildComponent, this line

   //this.myArray=["1","2","3"]; //THIS DOESNT WORK

is never executed.

If ChildComponent is supposed to inherit ngOnInit method from parent class, it shouldn't define its own method. If it's supposed to extend it, it should call parent's method:

  ngOnInit() {
    super.ngOnInit();
    ...
  }