Angular 2 - ngIf Alternative which does not initialize the component evertime the ngIf value changes

Question

I have a custom tab implementation, where i show the tab-content with some ngIf directives like this:

<tab1 *ngIf="condition === 1"></tab1>
<tab2 *ngIf="condition === 2"></tab2>

Tabs have their own forms, some content which should just be initialized once and no more. With my current implementation, everytime i change my condition which then changes the tab, the components tab1 and tab2 are initialized again.

Do we have any other ngIf alternatives (like the old ng-show maybe), which does not initializes the component again and just fade in the new content on UI. Otherwise i have to do it with css (display none).

Answer 1

You can use [hidden] instead of *ngIf.

In contrary to *ngIf, hidden doesn't completely remove content from the DOM, it just... well, hides it ;)