How to init a component only when its tag is at `*ngIf=true`?
<p><strong>Update:</strong><br />
Günter Zöchbauer provided a very acceptable answer that works perfectly (and thank you!). But I still have a question to check if what I am doing is the correct way of getting the result I seek. Context is given below.<br />
What I expect with my custom tag on the parent view, is that when the <code>*ngIf</code> condition is false, the component is not loaded at all (or maybe most part of it). Is it normal that even if it is not in the DOM (because the condition is false), it is still loaded? Is there a better way to embed components' templates (and the logic of their class) into a parent component's template?</p>
<h1>Original post</h1>
<p>I am new to Angular 2 and so far I'm having much fun developing a small song track metadata application based on the Spotify API.</p>
<p><strong>TL;DR:</strong> How to init a component only when its corresponding HTML tag (defined with the <code>selector</code> property of <code>@Component</code>) if <code>*ngIf=&quot;true&quot;</code>?</p>
<hr />
<p>But of course I'm facing difficulties! I have this component, <code>TrackDetailComponent</code>, in the template of which I would like to include 2 other components. On clicking on a button, it would switch from one inner component to the other.<br />
Here is how the template looks like (note that I only have developed one of the two inner components for now, so I used a placeholder in stead of the second one):</p>
<pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;view&quot;&gt;
    &lt;tig-track-info *ngIf=&quot;childView == TrackDetailView.InfoView&quot; [track]=&quot;track&quot;&gt;&lt;/tig-track-info&gt;
    &lt;p *ngIf=&quot;childView == TrackDetailView.LyricsView&quot;&gt;Here go the lyrics&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>As you can see, my inner component (named <code>TrackInfoComponent</code>) has an input parameter. Here is an excerpt of that component:</p>
<pre class="lang-ts prettyprint-override"><code>@Component({
    selector: &quot;tig-track-info&quot;,
    templateUrl: &quot;app/components/track-info/track-info.component.html&quot;,
    styleUrls: [&quot;app/components/track-info/track-info.component.css&quot;,
                &quot;app/shared/animations.css&quot;]
})
export class TrackInfoComponent implements OnInit {
    private _trackId: string = null;
    @Input() 
    track: Track = null;
    previewAudio: any = null; // The Audio object is not yet defined in TypeScript
    albumArtworkLoaded: boolean = false;
    ...
}
</code></pre>
<p>My real problem is not embedding the <code>TrackInfoComponent</code> inside the other one, but it is to sync them. The <code>TrackDetailComponent</code> calls an API asynchronously and then initializes the <code>track</code> property. But <code>TrackInfoComponent</code> also needs that <code>track</code> to be initialized in order to do its job or else I get a null reference exception (which is logical).</p>
<p>I tried setting the child component data in the <code>ngOnInit()</code> and setting the <code>*ngIf</code> of its parent's template to true only when the <code>track</code> is ready but it seems that <code>ngOnInit()</code> is called right away, even if the DOM element <code>tig-track-info</code> is not display with <code>*ngIf</code>.</p>
<p>I guess I could use events or my own init method in the child component, to call only when I'm ready, but I would like to know if there is a better way to do it using the Angular 2 component lifecycle hooks or any other method recommanded for that. Does anyone have any idea about that?</p>
<p>Thank you :-)</p>