如何使用* ngIf else渲染组件

Question

I am new to angular and I am writing dummy app to teach myself angular. My idea was to have 2 inputs where player1 and player2 write down their names. When they press the button game starts and shows their names and health.

I am doing that with *ngIf else, but when I click the button to change boolean nothing is shown.

What is the problem and is there a better way to do that?

app.component.html

<p>This will not change!</p>
<ng-template *ngIf="startGame;
  else noStart">
  <p> Render other components for health and names. Did game start: {{startGame}}</p>
</ng-template>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  startGame: boolean = false;
  player1: string = '';
  player2: string = '';
  username = '';

  setPlayer1(event) {
    this.player1 = event.target.value;
  }

  setPlayer2(event) {
    this.player2 = event.target.value;
  }

  onStartGame() {
    if(this.player1 !== '' && this.player2 !== '')
      this.startGame = true;
  }
}

I want to render other component or HTML if boolean changes in if statment.

Answer 1

The ng-template just create a template and which won't show by default, use ng-container for that purpose which helps to group and add multiple elements to DOM.

<p>This will not change!</p>
<ng-container *ngIf="startGame;
  else noStart">
  <p> Render other components for health and names. Did game start: {{startGame}}</p>
</ng-container>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>

---

You can event use *ngIf directive with the p tag since there is only one element( p tag) and use ng-container whenever you want to group multiple elements.

<p>This will not change!</p>
<p *ngIf="startGame;
  else noStart"> Render other components for health and names. Did game start: {{startGame}}</p>
<ng-template #noStart>
  <h1> Input player names to start the game!</h1>
  <input [(ngModel)]="player1">
  <br>
  <input [(ngModel)]="player2">
  <br>
  <button (click)="onStartGame()">Start</button>
</ng-template>

Answer 2

更改* ngIf并写入[ngIf]但不建议使用