Squashed commit of the following:

commit 6596d30bd6
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 18:32:41 2025 +0100

    center nTeamsSelector

commit 497b64fe3f
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 15:25:24 2025 +0100

    remove angular material completely

commit 4d58880493
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 15:23:05 2025 +0100

    replace angular material components with bootstrap

commit dcf25ea969
Author: eneller <erikneller@gmx.de>
Date:   Mon Jan 6 13:13:05 2025 +0100

    add ng-bootstrap

commit 48bbdab308
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 11:07:07 2024 +0100

    implement nTeams

commit f7f8482bc9
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 09:12:38 2024 +0100

    update icons

commit e0a319b32a
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 08:48:14 2024 +0100

    make pwa for offline usage

commit 4be3649d43
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 00:53:27 2024 +0100

    add padding to nTeamsToggle

commit 2a596b15c8
Author: eneller <erikneller@gmx.de>
Date:   Thu Nov 28 00:32:41 2024 +0100

    fully functional using angular

commit d2090f30d4
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 23:40:34 2024 +0100

    basic ui alignment, add nTeams

commit 97f01f924a
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 22:37:29 2024 +0100

    add basic ui elements

commit 102f589869
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 22:01:32 2024 +0100

    add angular material

commit 7f5978b226
Author: eneller <erikneller@gmx.de>
Date:   Wed Nov 27 20:15:11 2024 +0100

    Initial Angular Commit

src/app/app.component.html

@@ -0,0 +1,60 @@
+<style>
+  *{
+    text-align: center;
+  }
+</style>
+<main class="main">
+  <div class="row justify-content-md-center">
+    <h1>Please select the number of teams:</h1>
+  <div class="btn-toolbar mb-3 col justify-content-center" role="toolbar">
+  <div class="btn-group me-2" id="numTeamsSelector" role="group"
+    value="2">
+    <input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+    <label class="btn btn-outline-primary" for="btnradio1">Two</label>
+
+    <input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio2">Three</label>
+
+    <input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+    <label class="btn btn-outline-primary" for="btnradio3">n</label>
+  </div>
+  <div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" class="col-md-auto">
+    <label for="nTeamsField">n Teams</label>
+    <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
+  </div>
+</div>
+  <form>
+    <div class="container">
+    <label for="playerNames">Names</label>
+    <textarea class="form-control mb-3"
+      rows="18" 
+      cols="30"
+      style="text-align: left;" 
+      #playerNames
+      id="playerNames"
+      ></textarea>
+    </div>
+  <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
+  
+  </form>
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th scope="col">Size</th>
+        <th scope="col">Names</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (team of teamsArray; track $index) {
+        <tr>
+          <td>{{ team.length | number }}</td>
+          <td>{{ team }}</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+
+</div>
+</main>
+
+<router-outlet />