title: Why is ngOnInit called twice?
body: <p>I trying to create new component, <code>ResultComponent</code>, but its <code>ngOnInit()</code> method is getting called twice and I don't know why this is happening. In the code, <code>ResultComponent</code> inherits <code>@Input</code> from the parent component <code>mcq-component</code>.</p>
  
  <p>Here is the code: </p>
  
  <p><strong>Parent Component (MCQComponent)</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'mcq-component',
      template: `
          &lt;div *ngIf = 'isQuestionView'&gt;
              .....
          &lt;/div&gt;
          &lt;result-comp *ngIf = '!isQuestionView' [answers] = 'ansArray'&gt;&lt;result-comp&gt;
      `,
      styles: [
          `
              ....
          `
      ],
      providers: [AppService],
      directives: [SelectableDirective, ResultComponent]
  })
  export class MCQComponent implements OnInit{
        private ansArray:Array&lt;any&gt; = [];
      ....
      constructor(private appService: AppService){}
      ....
  }
  </code></pre>
  
  <p><strong>Child Component (result-comp)</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
      selector:'result-comp',
      template: `
          &lt;h2&gt;Result page:&lt;/h2&gt;
  
      `
  })
  export class ResultComponent implements OnInit{
      @Input('answers') ans:Array&lt;any&gt;;
  
      ngOnInit(){
          console.log('Ans array: '+this.ans);
      }
  }
  </code></pre>
  
  <p>When run, <code>console.log</code> is showing up two times, the first time it shows the correct array but the second time it gives <code>undefined</code>. I've not been able to figure it out: why is <code>ngOnInit</code> in <code>ResultComponent</code> getting called twice? </p>