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 ...