replace angular material components with bootstrap

package.json

@@ -7,6 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
+    "serve": "ng serve --host 0.0.0.0 --port 4200",
     "serve:ssr:vb": "node dist/vb/server/server.mjs"
   },
   "private": true,
@@ -48,4 +49,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.6.2"
   }
-}
+}

src/app/app.component.html

@@ -2,61 +2,59 @@
   *{
     text-align: center;
   }
-  mat-button-toggle-group{
-    margin-bottom: 6px;
-  }
-  #nTeamsText{
-    margin-left: 6px;
-  }
 </style>
 <main class="main">
-  <mat-grid-list cols="1">
+  <div class="text-center">
     <h1>Please select the number of teams:</h1>
-  <div class="nTeams">
+  <div class="btn-toolbar mb-3" role="toolbar">
-  <!--TODO add default selection-->
+  <div class="btn-group" id="numTeamsSelector" role="group"
-  <mat-button-toggle-group id="numTeamsSelector" 
+    value="2">
-    value="2"
+    <input value="2" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
-    (change)="onNumTeamsSelector($event)"
+    <label class="btn btn-outline-primary" for="btnradio1">Two</label>
-    >
+
-    <mat-button-toggle value="2">Two</mat-button-toggle>
+    <input value="3" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
-    <mat-button-toggle value="3">Three</mat-button-toggle>
+    <label class="btn btn-outline-primary" for="btnradio2">Three</label>
-    <mat-button-toggle value="n">n</mat-button-toggle>
+
-  </mat-button-toggle-group>
+    <input value="n" [(ngModel)]="numTeamsSelectorValue" type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
-  <mat-form-field *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" >
+    <label class="btn btn-outline-primary" for="btnradio3">n</label>
-    <mat-label>n Teams</mat-label>
+  </div>
-    <input matInput type="number" pattern="\d*" [(ngModel)]="nTeamsValue">
+  <div *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" >
-  </mat-form-field>
+    <label for="nTeamsField">n Teams</label>
+    <input type="number" pattern="\d*" [(ngModel)]="nTeamsValue" id="nTeamsField" class="form-control" >
+  </div>
 </div>
-<div>
+  <form>
-  <mat-form-field>
+    <div class="container">
-    <mat-label>Names</mat-label>
+    <label for="playerNames">Names</label>
-    <textarea matInput 
+    <textarea class="form-control mb-3"
       rows="18" 
       cols="30"
       style="text-align: left;" 
       #playerNames
+      id="playerNames"
       ></textarea>
-  </mat-form-field>
+    </div>
-</div>
+  <button type="button" (click)="onButtonGenerate(playerNames.value)" class="btn btn-primary">Generate</button>
-  <button mat-flat-button (click)="onButtonGenerate(playerNames.value)">Generate</button>
   
-  <!--TODO populate with ngFor? extract list items as component? use table instead of list?-->
+  </form>
-  <table mat-table [dataSource]="teamsArray">
+  <table class="table table-striped">
-    <ng-container matColumnDef="teamCount">
+    <thead>
-      <th mat-header-cell *matHeaderCellDef>Size</th>
+      <tr>
-      <td mat-cell *matCellDef="let element">{{element.length}}</td>
+        <th scope="col">Size</th>
-    </ng-container>
+        <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>
 
-    <ng-container matColumnDef="teamNames">
+</div>
-      <th mat-header-cell *matHeaderCellDef>Names</th>
-      <td mat-cell *matCellDef="let element">{{element}}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>  
-
-  </mat-grid-list>
 </main>
 
 <router-outlet />

src/app/app.component.ts

@@ -1,17 +1,13 @@
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterOutlet } from '@angular/router';
-import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/button-toggle'; 
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import {MatButtonModule} from '@angular/material/button';
+
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatTableModule} from '@angular/material/table';
-import {MatGridListModule} from '@angular/material/grid-list';
 import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatTableModule, MatGridListModule, CommonModule, FormsModule],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
@@ -23,10 +19,6 @@ export class AppComponent {
   teamsArray: string[][] = [];
   displayedColumns = ["teamCount", "teamNames"];
 
-  onNumTeamsSelector(event: MatButtonToggleChange): void{
-    this.numTeamsSelectorValue = event.value;
-  }
-
   onButtonGenerate(textinput: string): void{
     if(this.numTeamsSelectorValue === 'n'){
       this.numTeamsSelected  = Number(this.nTeamsValue);