Exercise: Customized Structural Directives

Let’s practice implementing custom structural directives.

We'll cover the following

Let’s get more practice with a basic structural directive that adds or removes elements.

Objectives

There might be cases when we want to specify whether an element should be visible only for premium or standard account types. To do that, we want to pass the string that will say whether the element should be visible. Let’s see how this works:

<button (click)="doAction()" *appForRoleOnly="premium"> 
	I'm only for premium 
</button>

<button (click)="doAction()" *appForRoleOnly="standard"> 
	I'm only for standard 
</button>

Task

Please write a structural directive that allows such a use. If you need help with the task, please check our *appPremiumOnly for hints.

Get hands-on with 1200+ tech skills courses.