fully functional using angular

src/app/app.component.html

@@ -16,25 +16,40 @@
     <mat-button-toggle value="3">Three</mat-button-toggle>
     <mat-button-toggle value="n">n</mat-button-toggle>
   </mat-button-toggle-group>
-  <mat-form-field id="nTeamsText" [style.display]="numTeamsSelected === 'n' ? 'inline' : 'none'">
-    <mat-label>n</mat-label>
+  <mat-form-field id="nTeamsText" [style.display]="numTeamsSelectorValue === 'n' ? 'inline' : 'none'">
+    <mat-label>n Teams</mat-label>
     <input matInput type="number" pattern="\d*" value="4">
   </mat-form-field>
 </div>
 <div>
   <mat-form-field>
     <mat-label>Names</mat-label>
-    <textarea matInput rows="18" cols="30"></textarea>
+    <textarea matInput 
+      rows="18" 
+      cols="30"
+      style="text-align: left;" 
+      #playerNames
+      ></textarea>
   </mat-form-field>
 </div>
-  <button mat-flat-button >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?-->
-  <mat-list>
-    <mat-list-item>Team1</mat-list-item>
-    <mat-list-item>Team2</mat-list-item>
-    <mat-list-item>Team3</mat-list-item>
-   </mat-list>
+  <table mat-table [dataSource]="teamsArray">
+    <ng-container matColumnDef="teamCount">
+      <th mat-header-cell *matHeaderCellDef>Size</th>
+      <td mat-cell *matCellDef="let element">{{element.length}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="teamNames">
+      <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>
 

src/app/app.component.ts

@@ -4,19 +4,61 @@ import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/bu
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatListModule} from '@angular/material/list';
+import {MatTableModule} from '@angular/material/table';
 import {MatGridListModule} from '@angular/material/grid-list';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatListModule, MatGridListModule],
+  imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatTableModule, MatGridListModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
 export class AppComponent {
   title = 'vb';
-  numTeamsSelected = "2";
+  numTeamsSelectorValue = "2";
+  numTeamsSelected = 2;
+  teamsArray: string[][] = [];
+  displayedColumns = ["teamCount", "teamNames"];
+
   onNumTeamsSelector(event: MatButtonToggleChange): void{
-    this.numTeamsSelected = event.value;
+    this.numTeamsSelectorValue = event.value;
+    if(this.numTeamsSelectorValue === 'n'){
+      this.numTeamsSelected  = 4; //TODO
+    }
+    else{
+      this.numTeamsSelected = Number(this.numTeamsSelectorValue);
+    }
   }
+
+  onButtonGenerate(textinput: string): void{
+    let names = textinput
+        .split('\n')
+        .map(function(str){return str.trim();})
+        .filter(function(str){return str}); // boolean interpretation is same as non-empty
+    // remove duplicates by using a Set
+    names = [...new Set(names)];
+    
+    var teams = Array.from({ length: this.numTeamsSelected }, () => []);
+    var playersPerTeam = Math.floor(names.length / this.numTeamsSelected);
+
+    let nameslen = names.length;
+    function* iter(list: any){
+        let index = 0;
+        while(true){
+            yield list[index % list.length];
+            index++;
+        }
+    }
+    var iterator = iter(teams);
+    for(let i =0; i < nameslen; i++){
+        var index = Math.floor(Math.random()* names.length);
+        var n = names[index]; 
+        names.splice(index,1);
+        var team = iterator.next().value;
+        team.push(n);
+
+    }
+    this.teamsArray = teams;
+  }
+
 }