Improving display of userdata observable

src/app/home/home.component.html

-<h3>Welcome to home Route - shows data from keycloak userData$ observable </h3>
+<h3><mat-icon>home</mat-icon> Welcome to home Route - shows data from keycloak userData$ observable </h3>
 
 <div>
     <hr>
@@ -6,6 +6,39 @@
     <pre>Username: {{ username }}</pre>
     <pre>OIDC configid: {{ configId }}</pre>
     <pre>Default Roles: {{ defaultRoles }}</pre>
+    <ng-template [ngIf]="owner_of_admin_role" [ngIfElse]="not_owner_of_admin_role">
+        <div>
+        <p> Owner of Admin role:  <mat-icon>check</mat-icon></p>
+        </div>
+    </ng-template>
+
+    <ng-template #not_owner_of_admin_role>
+        <div>
+            <p> Owner of Admin role : <mat-icon>clear</mat-icon></p>
+        </div>
+    </ng-template>
+    <ng-template [ngIf]="owner_of_agent_role" [ngIfElse]="not_owner_of_agent_role">
+        <div>
+            <p> Owner of Agent role : <mat-icon>check</mat-icon></p>
+        </div>
+    </ng-template>
+    <ng-template #not_owner_of_agent_role>
+        <div>
+            <p> Owner of Agent role : <mat-icon>clear</mat-icon></p>
+        </div>
+    </ng-template>
+
+    <ng-template [ngIf]="owner_of_admin_role" [ngIfElse]="not_owner_of_superadmin_role">
+    <div>
+        <p> Owner of Superadmin role:  <mat-icon>check</mat-icon></p>
+    </div>
+    </ng-template>
+
+    <ng-template #not_owner_of_superadmin_role>
+        <div>
+            <p> Owner of Superadmin role : <mat-icon>clear</mat-icon></p>
+        </div>
+    </ng-template>
 
     <hr>
     <h5>JSON Data from userData$ Observable </h5>

src/app/home/home.component.ts

@@ -32,6 +32,9 @@ export class HomeComponent implements OnInit, OnDestroy {
   //let account : Account =  {}
   //const waldo: Foo = {...}
    accounts: any[] ;
+   owner_of_admin_role = false;
+   owner_of_superadmin_role = false;
+   owner_of_agent_role = false;
 
   constructor(public oidcSecurityService: OidcSecurityService,
               private http: HttpClient,
@@ -59,22 +62,33 @@ export class HomeComponent implements OnInit, OnDestroy {
       console.log('userDataResult::');
       /* Check for null and undefined  or main object and nested userData objects
       *  There are two different userdata objects holding the same data.
-      *  Not sure why we have duplicate data here
-      *  - userDataResult.userData                -> Singe Object
-      *  - userDataResult.allUserData[0].userData  -> Array of Objects
-      *
+      *  This allows to switch between multiple config files.
       *  During Logoff this the userData Objects are set to null !
+      *  If have multiple config files detail can be found looking at  allUserData[] array
+      *   userDataResult.allUserData[0].userData.email
       */
       if (userDataResult != null) {
-        if (userDataResult.allUserData[0].userData != null) {
+        if (userDataResult.userData != null) {
             // ...
-          this.configId = userDataResult.allUserData[0].configId;
-          this.username = userDataResult.allUserData[0].userData.preferred_username;
+          this.username = userDataResult.userData.preferred_username;
           this.accountService.setPreferredUsername(this.username );
-          this.email = userDataResult.allUserData[0].userData.email;
-          this.defaultRoles= userDataResult.allUserData[0].userData.default_roles;
-          console.log('userDataResult.allUserData[0].configId       : ', this.configId);
-          console.log('userDataResult.allUserData[0].userData.email : ', this.email);
+          this.email = userDataResult.userData.email;
+          this.defaultRoles= userDataResult.userData.default_roles;
+          console.log('userData.configId       : ', this.configId);
+          console.log('userData.userData.email : ', this.email);
+          console.log('userData.default_roles : ', this.defaultRoles);
+          if ( this.defaultRoles.includes('rbac_admin_role') ) {
+            this.owner_of_admin_role = true;
+            console.log(' --- ' + this.username + ' is owner of the Admin Role !');
+          }
+          if ( this.defaultRoles.includes('rbac_superadmin_role') ) {
+            this.owner_of_superadmin_role = true;
+            console.log(' --- ' + this.username + ' is owner of the Superadmin Role !');
+          }
+          if ( this.defaultRoles.includes('rbac_agent_role') ) {
+            this.owner_of_agent_role = true;
+            console.log(' --- ' + this.username + ' is owner of the Agent Role !');
+          }
         }
         // this.getAccounts();