Search⌘ K
AI Features

Write a Customized Structural Directive

Explore how to build custom structural directives in Angular to control UI rendering based on user roles, supporting dynamic updates via Observables, and create efficient repeat directives as alternatives to NgFor. Understand role-based access control and efficient DOM manipulation for improved frontend applications.

We'll cover the following...

In this lesson, we’ll practice implementing custom structural directives. We’ll present a few use cases and go through them together. Let’s get started!

User roles

In larger applications, we often have different roles in the system. The application requires a user to sign in, and it resolves a role assigned to the user. Based on this user role, the system is able to use only specific features available for this role. It’s a very similar approach to what we had in the previous lesson with premium and standard users. However, premium account types can be represented by a simple boolean flag, while the other roles could contain several variations.

In our case, let’s assume we have these four roles in the application:

  • Basic user
  • Trial user
  • Premium user
  • Administrator

We’ll represent ...