🟠 Directiva Estructural

Información

Las Directivas Estructurales son in concepto importante que necesitaras dominar para mejorar tus habilidades y conocimientos en Angular. Esta es la primera parte del desafío.

En Angular, “Guard” es un concepto muy importante por que siempre las vas a necesitar en cada aplicación que construyas.

Declaración

En LoginComponent, encontraras 6 botones correspondientes a 6 tipos de roles de usuario:

Nota

Se dejaran los nombres de los roles en ingles.

• Admin (Administrador)
• Manager (Gerente)
• Reader (Lector)
• Writer (Escritor)
• Reader and Writer (Lector y escritor)
• Client (Cliente)
• Everyone (Todos)

Paso 1

En InformationComponent, necesitaras mostrar la pieza de información correcta por cada rol usando una directiva estructural.

Restricciones:

• No puedes usar ngIf o @if dentro de InformationComponent.
• No puedes importar un store dentro de InformationComponent.

You should end up with something like below:

<div *hasRole="Role1">Información del Role1</div>

<div *hasRole="['Role1', 'Role2']">Información del Role1 y Role2</div>

<div *hasRoleSuperAdmin="true">Información solo para el Super Administrador</div>

Paso 2

En Routes.ts, deberás usar la guardia CanMatch para dirigir a todos los usuarios al correcto DashboardComponent.