Show and Hide with Alternative Templates

In this chapter, we discuss some practical ways we can make use of directives in our daily Angular-related challenges. We’ll learn three techniques that will build on what we already know.

In this lesson, we’ll improve a previous directivewith a custom NgIf directive implemented for premium and standard users. This particular directive is very handy when we need to implement many NgIf directives that use similar logic.

We don’t duplicate the directive across all components. We simply wrap it in a directive. However, there’s one feature of NgIf missed in implementation,that could be handy in many cases. Let’s start with a quick example.

Alternative template

It’s common to show and hide particular elements on the page depending upon the specific type of account. But, do we always only want to show or hide the element?

Sometimes, when account-type criteria are not met, we want to do something other than just hide the element. We might also want to replace the unavailable content with some other content or with a simple text that explains why the element is unavailable for a user. The NgIf supports this.

Let’s assume we want to show a button when the account type is premium and in non-premium accounts, display a text that informs the user about the current status of their account.

Let’s think about the case of two independent HTML fragments. This one is for the premium account:

<button (click)="doSomething()"> Click me! (premium only) </button>

And, this one is for standard accounts:

<p> Sorry, this function is only available for premium accounts </p>

Let’s bring these two together in a single Angular component code and add the NgIf directive to support the logic:

<button *ngIf="account.premium" (click)="doSomething()"> 
	Click me! (premium only) 
</button>

<p *ngIf="!account.premium"> 
	Sorry, this function is only available for premium accounts 
</p>

That should work fine, assuming that account.premium is the boolean flag that informs about the account type. If it’s true, the button is displayed, and in the other case, only the text directed at the user is rendered. We could perform the same action using our appPremium directive—but actually, there’s an even better option!

The NgIf directive can provide alternative templates that will be displayed when the condition is not met. That’s really great because it produces more readable code and protects from possible bugs. The syntax is very easy and already familiar to us:

<button *ngIf="account.premium; else nonPremiumMessage" (click)="doSomething()"> 
	Click me! (premium only) 
</button>

<ng-template #nonPremiumMessage>
	<p> 
		Sorry, this function is only available for premium accounts
	</p>
</ng-template>

Let’s see how this works. We create an ng-template that contains our alternative view, and we bind this template to the NgIf attribute using the #nonPremiumMessage selector.