form { 
    display: grid;
    gap: 1em;
}

form { 
    display: grid;
    gap: 1em;
}

.form-group {
    margin-block: 1em;
}

.form-group {
    margin-block: 1em;
}

//auth.component.html
<app-alert *ngIf="alertHost" (closingEvent)="onHandleError()"></app-alert>

//alert.component.html
<div class="backdrop" (click)="onClose()"></div>
<div class="alert-box">
    <p>{{ message }}</p>
    <div class="alert-box-actions">
        <button class="btn btn-primary" (click)="onClose()">Close</button>
    </div>
</div>

//auth.component.html
<app-alert *ngIf="alertHost" (closingEvent)="onHandleError()"></app-alert>

//alert.component.html
<div class="backdrop" (click)="onClose()"></div>
<div class="alert-box">
    <p>{{ message }}</p>
    <div class="alert-box-actions">
        <button class="btn btn-primary" (click)="onClose()">Close</button>
    </div>
</div>

//auth.component.ts
@ViewChild(AlertComponent, {static: true}) alertHost!: AlertComponent;

onHandleError(){
    console.log("handling error");
    this.viewContainerRef.remove();
}

private showErrorAlert(errorMessage: string){
    const viewContainerRef = this.alertHost.viewContainerRef;
    viewContainerRef.clear();

    const alertRef = viewContainerRef.createComponent<AlertComponent>(AlertComponent);
    alertRef.instance.message = errorMessage;
 }

//auth.component.ts
@ViewChild(AlertComponent, {static: true}) alertHost!: AlertComponent;

onHandleError(){
    console.log("handling error");
    this.viewContainerRef.remove();
}

private showErrorAlert(errorMessage: string){
    const viewContainerRef = this.alertHost.viewContainerRef;
    viewContainerRef.clear();

    const alertRef = viewContainerRef.createComponent<AlertComponent>(AlertComponent);
    alertRef.instance.message = errorMessage;
 }

for (let round = 1; round <= this.GAME_ROUNDS; round++) {
  for (let player of this.players) {
    this.startTurn();
    console.log(`starting turn for player in round ${round}`);
    console.log("" + player);
            
    rl.question("What do you want to do now? (F) Forge / (H) Heroic feat", 
                    (answer) => {console.log(`excellent choice that ${answer}, but this isn't implemented yet`)});
    }
  }

for (let round = 1; round <= this.GAME_ROUNDS; round++) {
  for (let player of this.players) {
    this.startTurn();
    console.log(`starting turn for player in round ${round}`);
    console.log("" + player);
            
    rl.question("What do you want to do now? (F) Forge / (H) Heroic feat", 
                    (answer) => {console.log(`excellent choice that ${answer}, but this isn't implemented yet`)});
    }
  }