implement nTeams

src/app/app.component.html

@@ -5,11 +5,14 @@
   mat-button-toggle-group{
     margin-bottom: 6px;
   }
+  #nTeamsText{
+    margin-left: 6px;
+  }
 </style>
 <main class="main">
   <mat-grid-list cols="1">
     <h1>Please select the number of teams:</h1>
-  <div>
+  <div class="nTeams">
   <!--TODO add default selection-->
   <mat-button-toggle-group id="numTeamsSelector" 
     value="2"
@@ -19,9 +22,9 @@
     <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]="numTeamsSelectorValue === 'n' ? 'inline' : 'none'">
+  <mat-form-field *ngIf="numTeamsSelectorValue === 'n'" id="nTeamsText" >
     <mat-label>n Teams</mat-label>
-    <input matInput type="number" pattern="\d*" value="4">
+    <input matInput type="number" pattern="\d*" [(ngModel)]="nTeamsValue">
   </mat-form-field>
 </div>
 <div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterOutlet } from '@angular/router';
 import {MatButtonToggleChange, MatButtonToggleModule} from '@angular/material/button-toggle'; 
 import {MatButtonModule} from '@angular/material/button';
@@ -6,10 +7,11 @@ 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],
+  imports: [RouterOutlet, MatButtonToggleModule, MatButtonModule, MatInputModule, MatFormFieldModule, MatTableModule, MatGridListModule, CommonModule, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
@@ -17,20 +19,21 @@ export class AppComponent {
   title = 'vb';
   numTeamsSelectorValue = "2";
   numTeamsSelected = 2;
+  nTeamsValue = "4";
   teamsArray: string[][] = [];
   displayedColumns = ["teamCount", "teamNames"];
 
   onNumTeamsSelector(event: MatButtonToggleChange): void{
     this.numTeamsSelectorValue = event.value;
+  }
+
+  onButtonGenerate(textinput: string): void{
     if(this.numTeamsSelectorValue === 'n'){
-      this.numTeamsSelected  = 4; //TODO
+      this.numTeamsSelected  = Number(this.nTeamsValue);
     }
     else{
       this.numTeamsSelected = Number(this.numTeamsSelectorValue);
     }
-  }
-
-  onButtonGenerate(textinput: string): void{
     let names = textinput
         .split('\n')
         .map(function(str){return str.trim();})