Johni Johni - 2 months ago 10
TypeScript Question

Load Angular 2 component to area

I have a website, where a settings dialog should be loaded in a specific are, when clicked on a button.
The settings dialog is a component which loads data from REST endpoints.
I don't want to insert the component and just hide it, since I want to save resources.
What's the correct Angular 2 way to do this?

Answer

You can use ngIf for that kind of purpose, it will insert element only if the condition is true

<div *ngIf="condition">
    <!-- Content present in DOM only if condition == true -->
</div>

This way your data won't be loaded at runtime, but when the component is inserted (=> when the condition becomes true).

EDIT : Load based on shouldBeLoaded, then show / hide based on shouldBeDisplayed ; once shouldBeLoaded is set to true, its value should not change

<component *ngIf="shouldBeLoaded" *ngShow="shouldBeDisplayed">
</component>