Map: diosplay of layers in the tree with viewableRole

src/app/map/controls/map-controls.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 
 import { FormControl } from '@angular/forms'
 import { MatSnackBar } from '@angular/material/snack-bar'
@@ -18,6 +18,7 @@ import { BaseMapWithStores } from '../../openapi'
     selector: 'gisaf-map-controls',
     templateUrl: './map-controls.component.html',
     styleUrls: ['./map-controls.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MapControlsComponent implements OnInit {
     baseUrl: string = '/gj/'

src/app/map/tree-layer-item/tree-layer-item.component.html

@@ -6,7 +6,7 @@
         matTooltip="{{ node.description || node.title || node.name }} ({{ node.gisType }}, {{ node.count }})"
         matTooltipPosition="right"
         [class.hasPlugins]="!!node.tagPlugins"
-        [hidden]='isHidden()'
+        [hidden]='isHidden() | async'
         >
         <div class="gisaf-intext"
             [matMenuTriggerFor]="layerNodeMenu"

src/app/map/tree-layer-item/tree-layer-item.component.ts

@@ -4,6 +4,7 @@ import { Component, OnInit, Input, Output, EventEmitter,
 import { AuthenticationService } from '../../_services/authentication.service'
 import { Node, LayerNode } from '../models'
 import { MapControlService } from '../map-control.service'
+import { Observable, map, of } from 'rxjs'
 
 @Component({
     selector: 'gisaf-tree-layer-item',
@@ -35,13 +36,15 @@ export class TreeLayerItemComponent implements OnInit {
         }
     }
 
-    isHidden(): boolean {
+    isHidden(): Observable<boolean> {
-        let node = <LayerNode>this.node
+        let role: string = (<LayerNode>this.node).viewableRole
-        if (!node.viewableRole) {
+        if (!role) {
-            return false
+            return of(false)
         }
         else {
-            return !this.authenticationService.isAuthorized([node.viewableRole])
+            return this.authenticationService.isAuthorized([role]).pipe(map(
+                a => !a
+            ))
         }
     }