Angular 10 – Conditional Rendering

Conditional Rendering is very important aspect in Single Page Applications(SPA). Moreover, it is a key concept in Angular. So you need to try to understand it clearly.

1. What is Conditional Rendering
2. The Else Block
3. Render Based on CheckBox Click
4. Simple Guessing Game
5. Render Based on Button Click

1. What is Conditional Rendering?

Conditional rendering allows you to insert elements or components into the DOM only when certain condition is met.

For example, let’s say there is a boolean variable called show. You want do display a button only when this variable is true. The html markup would be:

<div class="container">
  <p *ngIf="show"><button>Click Here</button></p>
</div>

In this example, if the variable show is false, then the <p></p> elements and it’s content would not be rendered on the page.

2. The else Block

In this case, we want to display the button if the variable is true. But if it is false, we show a text box.  The code below  would do just that.

<p *ngIf="show; else textbox">
  <button>Click Here</button>
</p>

<ng-template #textbox>
  This is a textbox <input type="text">
</ng-template>

Notice that the <ng-template> block has a template reference of #textbox. Therefore, this is the name you specify in the else statement from the <p> block. The <ng-template> is a partial template and would be rendered if the field show is false.

3. Render Based on Checkbox Click

In this case, we want show a button if a checkbox is checked. But if we uncheck the checkbox, we show a textbox. The code is given below:

<p>
   Check to show button, uncheck to show textbox:
   <input [(ngModel)]="show" type="checkbox">
</p>

<p *ngIf="show; else textbox">
  This is a button: <button>Click Here</button>
</p>

<ng-template #textbox>
  <p>This is a textbox: <input type="text"></p>
</ng-template>

This is similar to the previous example. We simply use the checkbox to toggle the value of the show variable. To achieve this, assign the variable to [(ngModel)] to create a two way binding

4. Simple Guessing Game

Let’s now apply conditional rendering to create a very basic guessing game. This is how it goes: there’ll be a magicNumber(0 to 9). Then a textbox would be displayed asking the user to guess the number. If you user guesses correctly, then he gets a message: “…you win”. Else the message “not correct yet, please try again is displayed”.

Guess the number(0 to 9):
<input type="text" [(ngModel)]="guess">

<p *ngIf="magicNumber==guess; else tryagain">
  You win!
</p>

<ng-template #tryagain>
  <p>Not correct yet</p>
</ng-template>

The structural directive *ngIf is used to check if the text input entry matches the magicNumber. You can review Angular Directives here. Also note that two-way has been created between the textbox and the guess field.

5. Render Based on Button Click

Let’s just take on last example. This is similar to the checkbox example. In this case, an inline function is used to negate the current value of variable, show. Also, a conditional operator ? is used check the current value of show. If it’s true, then button text is “Hide Text” otherwise it is “Show Text”.

<button (click)="show = !show">{{show ? 'Hide Text' : 'Show Text'}}</button>
show = {{show}}
<br>
<div *ngIf="show">Angular is fun! Keep Learning!</div>

The actual conditional rendering is done in the last div tag. I’m sure this is quite clear as well