Why is ngOnInit called twice?
<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>