Show and Hide with Alternative Templates
Let’s learn how to extend simple show and hide directives using an alternative template.
We'll cover the following
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.
Get hands-on with 1200+ tech skills courses.