How can I pass an observable array of type Map<number, Employee> using the async pipe?

Question

This is my Interface / Type

export interface Employee {
  id: number;
  name: string;
}
export type EmployeesMap = Map<number, Employee>;

This is my Service

class EmployeeService {
  employees$: Observable<Employee[]> = of([
    {
      id: 1,
      name: 'Joe',
    },
    {
      id: 2,
      name: 'Mel',
    },
  ]);
  employeesMap$: Observable<EmployeesMap> = this.employees$.pipe(
    map((employees) => {
      const map: [number, Employee][] = employees.map((employee) => [
        employee.id,
        employee,
      ]);
      const employeeMap: EmployeesMap = new Map(map);
      return employeeMap;
    })
  );
}

This is my Child Component

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [CommonModule],
  template: `{{employees | json}}<br>{{employeesMap | json}}`,
})
export class ChildComponent {
  @Input() employees: Employee[] = [];
  @Input() employeesMap: EmployeesMap = new Map();
}

This is my Parent Component

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ChildComponent],
  template: `
    <h1>Hello from Angular!</h1>
    <app-child 
      <!-- THIS WORKS... -->
      [employees]="(employees$ | async) ?? []" 
      <!-- THIS ERRORS... -->
      [employeesMap]="(employeesMap$ | async) ?? {}"
    />
  `,
})

Stackblitz: https://stackblitz.com/edit/stackblitz-starters-mhjnga?file=src%2Fmain.ts

I get the following error: Type 'EmployeesMap | {}' is not assignable to type 'EmployeesMap' Type '{}' is missing the following properties from type 'Map<number, Employee>': clear, delete, forEach, get, and 8 more.

Appreciate any help

A quick resolve will be employeesMap input parameter to support empty object @Input() employeesMap: EmployeesMap | {} = new Map(); — Yong Shun
– Yong Shun, Commented Aug 21, 2023 at 2:33
@Ricky apologies, this is my first post, I only realised it after posting. I've removed the image and posted the code as text. Got replica of the problem on Stackblitz (Link above). — Easton
– Easton, Commented Aug 21, 2023 at 3:29
@YongShun The error goes away but I get back an empty object, the async pipe still wasn't able to pipe the data thru, any advice — Easton
– Easton, Commented Aug 21, 2023 at 3:38
I don't think it is the issue came from async pipe, but you can't JSON.stringify() the Map. For your reference: stackoverflow.com/q/29085197/8017690 — Yong Shun
– Yong Shun, Commented Aug 21, 2023 at 8:23

Benny Halperin · Accepted Answer · 2023-08-21 05:44:04Z

0

In order to render map values you need to use its keys or values iterators. So, in your child component replace the template with e.g. the following:

template: `employees: {{employees | json}}<br>employeesMap: <div *ngFor="let key of employeesMap?.keys()">{{ key }}, {{ employeesMap?.get(key)?.name }}</div>`

And in the class say:

@Input() employeesMap: EmployeesMap | null = new Map();

And in the parent component:

 <app-child 
      [employees]="(employees$ | async) ?? []" 
      [employeesMap]="employeesMap$ | async"
    />

answered Aug 21, 2023 at 5:44

Benny Halperin

2,3723 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Easton Over a year ago

this solved my problem, didn't know that we cannot pass map objects like normal arrays, learn something new today, Thanks :-)

Collectives™ on Stack Overflow

How can I pass an observable array of type Map<number, Employee> using the async pipe?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related