fix: TabItem create undefined Link ID when id is set with binding (si…

…mpleangularcontrols#140)
jnetwork-gmbh · Aug 31, 2024 · 0aff55c · 0aff55c
1 parent 238b899
commit 0aff55c
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 5 deletions.
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.html
@@ -1,6 +1,5 @@
 <h2>Tabs</h2>
 <form #myForm="sacform" labelsize="3">
-
   <sac-tab name="tab1">
     <sac-tabitem id="home1" label="Home">
       <ng-template>
@@ -47,4 +46,16 @@ <h2>Tabs</h2>
     </sac-tabitem>
   </sac-tab>
 
-</form>
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
+</form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/tabs/tabs.component.ts
@@ -5,5 +5,9 @@ import { Component } from '@angular/core';
   templateUrl: './tabs.component.html',
 })
 export class DemoTabsComponent {
+  // #region Properties
 
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
 }
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.html
@@ -53,4 +53,17 @@ <h2>Tabs</h2>
       </ng-template>
     </sac-tabitem>
   </sac-tab>
+
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
 </form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap4/src/app/tabs/tabs.component.ts
@@ -4,4 +4,10 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class DemoTabsComponent {}
+export class DemoTabsComponent {
+  // #region Properties
+
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
+}
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.html
@@ -53,4 +53,17 @@ <h2>Tabs</h2>
       </ng-template>
     </sac-tabitem>
   </sac-tab>
+
+  <sac-tab name="tab3">
+    <sac-tabitem
+      id="tab_{{ item }}"
+      [label]="item"
+      [active]="i === 0 ? true : false"
+      *ngFor="let item of languages; index as i"
+    >
+      <ng-template>
+        <p>Tab Content here {{ i }}</p>
+      </ng-template>
+    </sac-tabitem>
+  </sac-tab>
 </form>
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts b/ch.jnetwork.sac-controls/projects/demo-bootstrap5/src/app/tabs/tabs.component.ts
@@ -4,4 +4,10 @@ import { Component } from '@angular/core';
   selector: 'app-tabs',
   templateUrl: './tabs.component.html',
 })
-export class DemoTabsComponent {}
+export class DemoTabsComponent {
+  // #region Properties
+
+  public languages = ['de', 'fr', 'it'];
+
+  // #endregion Properties
+}
diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/tabs/tab.html
@@ -7,7 +7,7 @@
       (click)="selectTab(item)"
       [ngStyle]="{'cursor': item._disabled ? 'not-allowed' : 'pointer'}"
     >
-      <a [id]="GetTabItemButtonId(item._id)" role="tab">
+      <a [id]="GetTabItemButtonId(item.id)" role="tab">
         <ng-template
           *ngTemplateOutlet="tablabeltemplate || defaultTabLabelTemplate;context:{ label: item.label }"
         >

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap4/src/controls/tabs/tab.html
@@ -2,6 +2,7 @@
 <div class="nav nav-tabs" role="tablist">
   <a
     *ngFor="let item of _tabItems"
+    [id]="GetTabItemButtonId(item.id)"
     role="tab"
     class="nav-item nav-link active"
     data-toggle="tab"

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap5/src/controls/tabs/tab.html
@@ -2,6 +2,7 @@
 <ul class="nav nav-tabs" role="tablist">
   <li class="nav-item" *ngFor="let item of _tabItems">
     <a
+      [id]="GetTabItemButtonId(item.id)"
       role="tab"
       class="nav-link"
       data-toggle="tab"