-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c8b9b45
commit a80cfbf
Showing
9 changed files
with
242 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <h1>Track Demo</h1> | ||
|
|
||
| <p> | ||
| The example below shows the difference of tracking list options with | ||
| <code>$index</code> and an actual unique attribute. By tracking a unique | ||
| attribute, the object wont be completely new initialized. In fact, when the | ||
| array changes, the focus of elements will be restored/tracked correctly. | ||
| </p> | ||
| <p> | ||
| Please enter a text in one of the input fields on the left side. After a few | ||
| seconds, items will be added to the array of the list. Keep an eye on where | ||
| you entered your text. While entering and concurrently adding new fields, your | ||
| input moves into another field as only the <code>$index</code> is tracked. The | ||
| list on the right tracks a unique attribute (<code>item.id</code>). This | ||
| ensures, the focus does not accidentally move to another input event when the | ||
| list updates concurrently. | ||
| </p> | ||
| <p> | ||
| Every 5 seconds a new entry is inserted. | ||
| </p> | ||
|
|
||
| <form> | ||
| <fieldset> | ||
| <legend>Track: <code>$index</code></legend> | ||
| @for(item of items; track $index) { | ||
| <div class="row"> | ||
| <label class="col-sm-6 col-form-label" [for]="'col-0-' + $index"> | ||
| {{ item.id }} | {{ item.name }} | ||
| </label> | ||
| <input [id]="'col-0-' + $index" class="form-control" /> | ||
| </div> | ||
| } | ||
| </fieldset> | ||
|
|
||
| <fieldset> | ||
| <legend>Track: <code>item.id</code></legend> | ||
| @for(item of items; track item.id) { | ||
| <div class="row"> | ||
| <label class="col-sm-6 col-form-label" [for]="'col-1-' + $index"> | ||
| {{ item.id }} | {{ item.name }} | ||
| </label> | ||
| <input [id]="'col-1-' + $index" class="form-control" /> | ||
| </div> | ||
| } | ||
| </fieldset> | ||
|
|
||
| <fieldset> | ||
| <legend>Track: <code>item</code></legend> | ||
| @for(item of items; track item) { | ||
| <div class="row"> | ||
| <label class="col-sm-6 col-form-label" [for]="'col-2-' + $index"> | ||
| {{ item.id }} | {{ item.name }} | ||
| </label> | ||
| <input [id]="'col-2-' + $index" class="form-control" /> | ||
| </div> | ||
| } | ||
| </fieldset> | ||
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| form { | ||
| margin-top: 1rem; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| gap: 1rem; | ||
| } | ||
|
|
||
| fieldset { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| gap: .5rem; | ||
| flex-direction: column; | ||
|
|
||
| legend { | ||
| font-weight: bold; | ||
| } | ||
| } | ||
|
|
||
| p { | ||
| margin-bottom: .5rem; | ||
| } | ||
|
|
||
| code { | ||
| color: var(--bright-blue); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { TrackViewComponent } from './track-view.component'; | ||
|
|
||
| describe('TrackViewComponent', () => { | ||
| let component: TrackViewComponent; | ||
| let fixture: ComponentFixture<TrackViewComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [TrackViewComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(TrackViewComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { FormsModule } from '@angular/forms'; | ||
|
|
||
| interface Item { | ||
| id: number; | ||
| name: string; | ||
| } | ||
|
|
||
| const fullNameItems: Item[] = [ | ||
| { id: 3, name: 'Item #3' }, | ||
| { id: 2, name: 'Item #2' }, | ||
| { id: 1, name: 'Item #1' }, | ||
| ]; | ||
|
|
||
| @Component({ | ||
| selector: 'app-track-view', | ||
| standalone: true, | ||
| imports: [FormsModule], | ||
| templateUrl: './track-view.component.html', | ||
| styleUrl: './track-view.component.scss' | ||
| }) | ||
| export class TrackViewComponent { | ||
| values = ['', '', '']; // Werte der Eingabefelder (initial) | ||
| items: Item[]; // Array mit Werten für *ngFor | ||
| toggle: boolean; | ||
|
|
||
| constructor() { | ||
| this.items = fullNameItems; | ||
| this.toggle = false; | ||
| setInterval(() => { | ||
| if (this.items.length >= 50) { | ||
| this.items = []; | ||
| } | ||
| this.addItem(); | ||
| }, 5000); | ||
| } | ||
|
|
||
| addItem() { | ||
| const num = this.items.length + 1; | ||
| this.toggle = !this.toggle; | ||
| this.items = [ | ||
| { id: num, name: `Item #${num}` }, | ||
|
|
||
| // with the following line will make the third column work as referecnes of the objects are kept | ||
| // ...this.items, | ||
|
|
||
| // with the follwoing line will make the third column not working as the references are not the same anymore (item === item => false) | ||
| ...structuredClone(this.items), | ||
| ]; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters