dotnet-core, angular;5.4.1 I have a tab sheet with several tabs defined, for example, as below:
<tab *ngIf="true && (isGranted('Pages.NcEntity.NcWarnings') || isGranted('Pages.NcEntity.NcWarning.Read'))" heading="{{l('Warnings')}}" customClass="m-tabs__item">
<app-warnings _="id"></app-warnings>
</tab>
I have several of these tabs and many are very heavy on data retrieval. How do I activate the embedded component on click? I have tried the following:
<tab *ngIf="true && (isGranted('Pages.NcEntity.NcWarnings') || isGranted('Pages.NcEntity.NcWarning.Read'))" heading="{{l('Warnings')}}" customClass="m-tabs__item">
<app-warnings *ngIf="warningsActivated" (click)="activateWarnings()" [id]="id"></app-warnings>
</tab>
But the component is not activated. I have also tried wrapping the component declaration in a [i:3bipxxbr]div_ with the same method to activate but it still does not show. Anyone?
3 Answer(s)
-
0
You can try tab's select event <a class="postlink" href="https://valor-software.com/ngx-bootstrap/#/tabs">https://valor-software.com/ngx-bootstrap/#/tabs</a>#select-event.
-
0
Hi,
You can use a variable to see which tab is selected. And use ngIf to dynamically load the content of a container. In the below sample activeTabIndex is being used for the active tab. And *ngIf loads the content when the relevant tab is selected.
<tabset class="tab-container"> <tab *ngIf="true" heading="TAB-HEADER-1" [active]="activeTabIndex == 0" customClass="m-tabs__item"> <div *ngIf="activeTabIndex == 0" > </div> </tab> <tab *ngIf="true" heading="TAB-HEADER-2" [active]="activeTabIndex == 1" customClass="m-tabs__item"> <div *ngIf="activeTabIndex == 1"> </div> </tab> <tab *ngIf="true" heading="TAB-HEADER-3" [active]="activeTabIndex == 2" customClass="m-tabs__item"> <div *ngIf="activeTabIndex == 2" > </div> </tab> </tabset>There's similar code that sets a variable for the active tab index in AspNet Zero code-base. That's not loading the content dynamically but as I say *ngIf will solve that issue.
- <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/settings/tenant-settings.component.html#L21">https://github.com/aspnetzero/aspnet-ze ... t.html#L21</a>
- <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/settings/tenant-settings.component.ts#L24">https://github.com/aspnetzero/aspnet-ze ... ent.ts#L24</a>
-
0
@ismcagdas, @alper - thanks both. I will investigate @alper's solution in a little more depth, the less I have to work with third party components the better!
