This is my Interface and Type Definition
export interface EmployeeDetails {
id: number;
name: string;
}
export type EmployeesDirectory = Map<number, EmployeeDetails>;
This is my Service Implementation
class EmployeeServiceManager {
employeesData$: Observable<EmployeeDetails[]> = of([
{
id: 1,
name: 'John',
},
{
id: 2,
name: 'Mary',
},
]);
employeesDataMap$: Observable<EmployeesDirectory> = this.employeesData$.pipe(
map((employees) => {
const directory: [number, EmployeeDetails][] = employees.map((employee) => [
employee.id,
employee,
]);
const employeeDirectory: EmployeesDirectory = new Map(directory);
return employeeDirectory;
})
);
}
This is the Child Component Configuration
@Component({
selector: 'app-child',
encapsulation: ViewEncapsulation.ShadowDom,
imports: [CommonModule],
template: `{{employees | json}}<br>{{employeesMap | json}}`,
})
export class ChildContent {
@Input() employees: EmployeeDetails[] = [];
@Input() employeesMap: EmployeesDirectory = new Map();
}
This is the Parent Component Setup
@Component({
selector: 'my-app',
shadowDom: true,
imports: [CommonModule, ChildContent],
template: `
<h1>Greetings from Angular!</h1>
<app-child
<!-- This section works fine -->
[employees]="(employees$ | async) ?? []"
<!-- This part generates an error -->
[employeesMap]="(employeesDataMap$ | async) ?? {}"
/>
`,
})
Stackblitz Link: https://stackblitz.com/edit/stackblitz-starters-mhjnga?file=src%2Fmain.ts
The following error message is encountered: Type 'EmployeesDirectory | {}' cannot be used as 'EmployeesDirectory' Type '{}' lacks properties present in type 'Map<number, EmployeeDetails>': clear, delete, forEach, get, plus 8 more.
Your assistance is greatly appreciated