Angular2: avoid rendering the DOM on ngIf a second time

Question

I have one control Taband it has two tabs. I placed two Kendo Grid / Any components on different tabs.

When I open / select a tab for the first time, it displays the associated / html component in the DOM. To improve performance, I placed ngIfon tabs to show only the active html tab. So, now it Domshows only the active html tab, but now when I switch to another tab and review the previous tab, its component / content seems to be displayed again. I want to stop the second time rendering.

Note. If I replace ngIfwith hidden, it will work as accepted, but it will cost performance since it has so many hours and DOM associated with it.

In fact, my main problem is that because of the above, when I go to the tabs, my scroll position of the grid is set to the top each time, and should remain in the same state

Below is some part of the code I made.

If the condition is in the contents of the html tab (displays only the selected tab in the DOM)

<div class="tab-heading-outer">
    <div class="tab-heading">
        <ul id="ulOpenedTabs" class="nav nav-tabs main-tabs" role="tablist">
            <li>                 
                <span class="ellipsis"> {{tab.Header}} </span>
            </li>
        </ul>
    </div>
</div>

<div class="tab-content" *ngIf="tab.IsSelected">
    <ng-content>
    <!--Html goes here-->
    </ng-content>
</div>

Answer 1

I don’t know your implementation of the tab, but why don’t you use a variable indicating whether the tab was selected at least once to display it?

<div class="tab-heading-outer">
    <div class="tab-heading">
        <ul id="ulOpenedTabs" class="nav nav-tabs main-tabs" role="tablist">
            <li>                 
                <span class="ellipsis" (click)="onTabSelected(tab)"> {{tab.Header}} </span>
            </li>
        </ul>
    </div>
</div>

<div class="tab-content" *ngIf="renderedTabs[tab.index]"  [hidden]="!tab.ISelected">
    <ng-content>
    <!--Html goes here-->
    </ng-content>
</div>

//component.ts

private renderedTabs : boolean[] = new Array(numberOfTabsHere);

onTabSelected(tab: Tab) 
{
    this.renderedTabs[tab.index] = true;
}

, , Tab

<div class="tab-heading-outer">
    <div class="tab-heading">
        <ul id="ulOpenedTabs" class="nav nav-tabs main-tabs" role="tablist">
            <li>                 
                <span class="ellipsis" (click)="tab.rendered=true"> {{tab.Header}} </span>
            </li>
        </ul>
    </div>
</div>

<div class="tab-content" *ngIf="tab.rendered" [hidden]="!tab.ISelected">
    <ng-content>
    <!--Html goes here-->
    </ng-content>
</div>

Answer 2

DOM , :

• [hidden].
• ChangeDetectorRef.detach(), .
• ChangeDetectorRef.reattach(), .

, , . , Observables async Pipe ( ), , .

detach():

, , . . , .

, , , .

, , ChangeDetectorRef @Input():

constructor(private changeDetector: ChangeDetectorRef) {}

@Input() set visible(visible: boolean) {
  if(!visible) {
    changeDetector.detach();
  } else {
    changeDetector.reattach();
  }
}

, , [visible]="false" [visible]="true".

ChangeDetectorRef.

Answer 3

.. ngIf , , , DOM.

, . - , , () temp.

: div angular 2

Answer 4

Can you use [hidden]="condition"instead *ngIf="condition"? *ngIfwhen falsewill remove the element that it is included and all its children from the DOM. If [hidden]- true, html is still in the DOM, but it is not displayed on the user's screen until [hidden]="false";