feat: add structural directives to manage the sections view

Author: efirst91

apps/angular/6-structural-directive/src/app/information.component.ts

@@ -1,22 +1,23 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { UserStore } from './user.store';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PermissionDirective } from './directives/permission.directive';
 
 @Component({
   selector: 'app-information',
   template: `
     <h2 class="mt-10 text-xl">Information Panel</h2>
     <!-- admin can see everything -->
-    <div>visible only for super admin</div>
-    <div>visible if manager</div>
-    <div>visible if manager and/or reader</div>
-    <div>visible if manager and/or writer</div>
-    <div>visible if client</div>
+    <div *appHasRoleSuperAdmin>visible only for super admin</div>
+    <div *appHasRole="'MANAGER'">visible if manager</div>
+    <div *appHasRole="['MANAGER', 'READER']">
+      visible if manager and/or reader
+    </div>
+    <div *appHasRole="['MANAGER', 'WRITER']">
+      visible if manager and/or writer
+    </div>
+    <div *appHasRole="['CLIENT']">visible if client</div>
     <div>visible for everyone</div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PermissionDirective],
 })
-export class InformationComponent {
-  private readonly userStore = inject(UserStore);
-
-  user$ = this.userStore.user$;
-}
+export class InformationComponent {}