Angular ngrx: Issue to render object in template

Question

I have a Typescript interface declared in this way:

export interface FolderList {
 ADMIN: [Folder[], string, string];
 SUPERADMIN: [Folder[], string, string];
 USER: [Folder[], string, string];
}

Folder is declared in this way:

export interface Folder {
  idFolder: number;
  folderName: string;
}

I want an object with three arrays inside:

FolderList: {
  ADMIN: [[{idFolder: '1', folderName: 'AdminFolder'}], "2 pages", "number 3"],
  SUPERADMIN: [[{idFolder: '1', folderName: 'SuperadminFolder'}], "2 pages", "number 3"],
  USER: [[{idFolder: '1', folderName: 'UserFolder'}], "2 pages", "number 3"],
}

I declared an attribute in my component in this way:

export class SidebarContainer implements OnInit {
  folder$: Observable<FolderList>;
}

This in an observable that I manage in one NGRX effect in this way:

  loadFolder$ = createEffect(() =>{
   return this.action$.pipe(
   ofType(SidebarAction.loadFirmSuccess),
   switchMap(action => {
    const foldersList = {};

    action.firms.map(
      firm => {
        firm.roles.map((role: string) => {
          foldersList[role] = this.sidebarService.getFolders(action.userId, firm.id.toString() , role, '0', '3');
        });
      }
    );

    return forkJoin(foldersList).pipe(map(folders => {
      return SidebarAction.loadFolderSuccess({folders});
    }));
  })
);
});

The key "role" referred to the three roles ADMIN, SUPERADMIN, USER.

After that I used a reducer that updates the state.

export const sideBarReducer = createReducer(
 initialSidebarState,
 on(SidebarActions.loadFolderSuccess, (state, action): SidebarState => {
   return {
     ...state,
     folders: action.folders
   };
 })
);

Now I'm tryng to display on template datas of this object

{{folder$.ADMIN | async }}

but visual studio code gives me this error:

  Identifier 'ADMIN' is not defined. 'Observable<FolderList>' does not 
  contain such a member

but if I render only folder$ in this way

 {{folder$ | async | json }}

I can see property ADMIN...

What's wrong?

Answer 1

folder$ is defined as Observable<FolderList> so it won't contain the property like ADMIN.

But folder$ | async will contain ADMIN property because of async pipe.

• Async pipe subscribes that folder$ observable and returns the latest emitted value. So folder$ | async will have value of FolderList.

So to show ADMIN property, it is needed to show from FolderList subscribed object as follows.

{{ (folder$ | async)?.ADMIN }}