title: Inheritance in angular2
body: <p>I'm trying to understand inheritance in angular 4.</p>
  
  <p>Below is my AppComponent file:</p>
  
  <pre><code>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
  
    }
  }
  </code></pre>
  
  <p>This is another component which extends AppComponent</p>
  
  <pre><code>import { Component, blurbs } from '@angular/core';
  import { AppComponent } from '../app.component';
  
  @Component({
    selector: 'app-child',
    templateUrl: `&lt;p&gt;
    title {{title}}
    &lt;button (click)="setTitle('child')"&gt;change title&lt;/button&gt;
  &lt;/p&gt;`,
    styleUrls: ['./child.component.css']
  })
  
  export class ChildComponent extends AppComponent implements OnInit {
  
    constructor() {
      super();
     }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>In the above code i'm calling the <strong>setTitle()</strong> method from the ChildComponent.</p>
  
  <p>I have a console log for myArray[2]. </p>
  
  <p>The value works fine if i initialize the value while declaring it.</p>
  
  <p>But if i just declare and initialize the array in the <strong>ngOnInit</strong> block the console.log doesnt work and tells me that myArray[2] is undefined.</p>
  
  <p>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</p>