Merge branch 'master' into refactor/old-width

siemens · Nov 8, 2024 · 51126b5 · 51126b5
2 parents bace0d9 + 676d029
commit 51126b5
Show file tree

Hide file tree

Showing 17 changed files with 186 additions and 144 deletions.
diff --git a/src/app/basic/contextmenu.component.ts b/src/app/basic/contextmenu.component.ts
@@ -23,14 +23,21 @@ import { Employee } from '../data.model';
           demonstrates how you would access the <code>contextmenu</code> event to display your own
           custom context menu.
         </p>
-        <p *ngIf="rawEvent">
-          <strong>Mouse position:</strong> <code>(x: {{ rawEvent?.x }}, y: {{ rawEvent?.y }})</code>
-        </p>
-        <p *ngIf="contextmenuRow"><strong>Row:</strong> {{ contextmenuRow?.name }}</p>
-        <p *ngIf="contextmenuColumn">
-          <strong>Header:</strong> name: {{ contextmenuColumn?.name }} prop:
-          {{ contextmenuColumn?.prop }}
-        </p>
+        @if (rawEvent) {
+          <p>
+            <strong>Mouse position:</strong>
+            <code>(x: {{ rawEvent?.x }}, y: {{ rawEvent?.y }})</code>
+          </p>
+        }
+        @if (contextmenuRow) {
+          <p><strong>Row:</strong> {{ contextmenuRow?.name }}</p>
+        }
+        @if (contextmenuColumn) {
+          <p>
+            <strong>Header:</strong> name: {{ contextmenuColumn?.name }} prop:
+            {{ contextmenuColumn?.prop }}
+          </p>
+        }
       </div>
       <ngx-datatable
         class="material"

diff --git a/src/app/basic/footer.component.ts b/src/app/basic/footer.component.ts
@@ -26,7 +26,7 @@ import { Employee } from '../data.model';
         [headerHeight]="50"
         rowHeight="auto"
       >
-        <ngx-datatable-footer *ngIf="true">
+        <ngx-datatable-footer>
           <ng-template
             ngx-datatable-footer-template
             let-rowCount="rowCount"

diff --git a/src/app/basic/inline.component.ts b/src/app/basic/inline.component.ts
@@ -34,20 +34,18 @@ import { Employee } from '../data.model';
             let-value="value"
             let-row="row"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-name'] = true"
-              *ngIf="!editing[rowIndex + '-name']"
-            >
-              {{ value }}
-            </span>
-            <input
-              autofocus
-              (blur)="updateValue($event, 'name', rowIndex)"
-              *ngIf="editing[rowIndex + '-name']"
-              type="text"
-              [value]="value"
-            />
+            @if (editing[rowIndex + '-name']) {
+              <input
+                autofocus
+                (blur)="updateValue($event, 'name', rowIndex)"
+                type="text"
+                [value]="value"
+              />
+            } @else {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true">
+                {{ value }}
+              </span>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Gender">
@@ -57,22 +55,21 @@ import { Employee } from '../data.model';
             let-row="row"
             let-value="value"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-gender'] = true"
-              *ngIf="!editing[rowIndex + '-gender']"
-            >
-              {{ value }}
-            </span>
-            <select
-              *ngIf="editing[rowIndex + '-gender']"
-              (blur)="editing[rowIndex + '-gender'] = false"
-              (change)="updateValue($event, 'gender', rowIndex)"
-              [value]="value"
-            >
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-            </select>
+            @if (!editing[rowIndex + '-gender']) {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true">
+                {{ value }}
+              </span>
+            }
+            @if (editing[rowIndex + '-gender']) {
+              <select
+                (blur)="editing[rowIndex + '-gender'] = false"
+                (change)="updateValue($event, 'gender', rowIndex)"
+                [value]="value"
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Age">

diff --git a/src/app/basic/scrolling-dynamically.component.ts b/src/app/basic/scrolling-dynamically.component.ts
@@ -37,20 +37,18 @@ import { Employee } from '../data.model';
             let-value="value"
             let-row="row"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-name'] = true"
-              *ngIf="!editing[rowIndex + '-name']"
-            >
-              {{ value }}
-            </span>
-            <input
-              autofocus
-              (blur)="updateValue($event, 'name', rowIndex)"
-              *ngIf="editing[rowIndex + '-name']"
-              type="text"
-              [value]="value"
-            />
+            @if (editing[rowIndex + '-name']) {
+              <input
+                autofocus
+                (blur)="updateValue($event, 'name', rowIndex)"
+                type="text"
+                [value]="value"
+              />
+            } @else {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true">
+                {{ value }}
+              </span>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Gender">
@@ -60,22 +58,21 @@ import { Employee } from '../data.model';
             let-row="row"
             let-value="value"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-gender'] = true"
-              *ngIf="!editing[rowIndex + '-gender']"
-            >
-              {{ value }}
-            </span>
-            <select
-              *ngIf="editing[rowIndex + '-gender']"
-              (blur)="editing[rowIndex + '-gender'] = false"
-              (change)="updateValue($event, 'gender', rowIndex)"
-              [value]="value"
-            >
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-            </select>
+            @if (!editing[rowIndex + '-gender']) {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true">
+                {{ value }}
+              </span>
+            }
+            @if (editing[rowIndex + '-gender']) {
+              <select
+                (blur)="editing[rowIndex + '-gender'] = false"
+                (change)="updateValue($event, 'gender', rowIndex)"
+                [value]="value"
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Age">

diff --git a/src/app/basic/tabs.component.ts b/src/app/basic/tabs.component.ts
@@ -46,22 +46,24 @@ import { FullEmployee } from '../data.model';
           </ngx-datatable>
         </div>
 
-        <div *ngIf="tab3">
-          <h4>ngIf Table</h4>
-          <ngx-datatable
-            class="material"
-            [rows]="rows"
-            [columnMode]="ColumnMode.force"
-            [headerHeight]="50"
-            [footerHeight]="50"
-            [rowHeight]="50"
-            [scrollbarV]="true"
-          >
-            <ngx-datatable-column name="Name" [width]="200"></ngx-datatable-column>
-            <ngx-datatable-column name="Gender" [width]="300"></ngx-datatable-column>
-            <ngx-datatable-column name="Age" [width]="80"></ngx-datatable-column>
-          </ngx-datatable>
-        </div>
+        @if (tab3) {
+          <div>
+            <h4>ngIf Table</h4>
+            <ngx-datatable
+              class="material"
+              [rows]="rows"
+              [columnMode]="ColumnMode.force"
+              [headerHeight]="50"
+              [footerHeight]="50"
+              [rowHeight]="50"
+              [scrollbarV]="true"
+            >
+              <ngx-datatable-column name="Name" [width]="200"></ngx-datatable-column>
+              <ngx-datatable-column name="Gender" [width]="300"></ngx-datatable-column>
+              <ngx-datatable-column name="Age" [width]="80"></ngx-datatable-column>
+            </ngx-datatable>
+          </div>
+        }
       </div>
     </div>
   `

diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts
@@ -26,22 +26,25 @@ import { Employee } from '../data.model';
           [footerHeight]="50"
           rowHeight="auto"
         >
-          <ngx-datatable-column *ngFor="let col of columns" [name]="col.name">
-          </ngx-datatable-column>
+          @for (col of columns; track col) {
+            <ngx-datatable-column [name]="col.name"> </ngx-datatable-column>
+          }
         </ngx-datatable>
       </div>
       <div class="selected-column">
         <h4>Available Columns</h4>
         <ul>
-          <li *ngFor="let col of allColumns">
-            <input
-              type="checkbox"
-              [id]="col.name"
-              (click)="toggle(col)"
-              [checked]="isChecked(col)"
-            />
-            <label [attr.for]="col.name">{{ col.name }}</label>
-          </li>
+          @for (col of allColumns; track col) {
+            <li>
+              <input
+                type="checkbox"
+                [id]="col.name"
+                (click)="toggle(col)"
+                [checked]="isChecked(col)"
+              />
+              <label [attr.for]="col.name">{{ col.name }}</label>
+            </li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-chkbox-template.component.ts b/src/app/selection/selection-chkbox-template.component.ts
@@ -71,10 +71,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-chkbox.component.ts b/src/app/selection/selection-chkbox.component.ts
@@ -60,10 +60,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-disabled.component.ts b/src/app/selection/selection-disabled.component.ts
@@ -39,10 +39,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-multi-click-chkbox.component.ts b/src/app/selection/selection-multi-click-chkbox.component.ts
@@ -61,10 +61,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-multi-click.component.ts b/src/app/selection/selection-multi-click.component.ts
@@ -42,10 +42,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-multi.component.ts b/src/app/selection/selection-multi.component.ts
@@ -45,10 +45,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>

diff --git a/src/app/selection/selection-single.component.ts b/src/app/selection/selection-single.component.ts
@@ -45,10 +45,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>