Change element text in Angular with condition

user_3902953 0
Viewed 2915

I have an issue with changing the content of an element in Angular. i am making a tic tac toe game and I put the header every movement the player do, but I want to render in that place when the player wins. Here is the code:

<div *ngIf="_state$ | async">
  <p>
  Turn of {{ (_state$ | async).turn == 'PLAYERX' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
  <p>
  There is a winner {{ (_state$ | async).winner == 'X' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
</div>

how i can do it. To show only once no both if the player wins that show the second

and is the player is playing and is has not win the first. I can only show the first only.

angular typescript html
1 Answers

I'm guessing (_state$ | async).winner will only be defined when you have a winner. In that case you can use that as a condition to show the second p and hide the first.

<div *ngIf="_state$ | async as state">
  <p *ngIf="!state.winner">
  Turn of {{ state.turn == 'PLAYERX' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
  <p *ngIf="state.winner">
  There is a winner {{ state.winner == 'X' ? "Player 1 - Xs" : "Player 2 - 0s" }}
  </p>
</div>

If the (_state$ | async).winner is always defined but has different value when there is no winner, then you'll have to change the condition to reflect that.

user_12056470
Related