Access object property using an enum type

Question

I am trying to access an object property using an enum (not sure if this is the right approach) and I get this error

No overload matches this call. Overload 1 of 2, '(componentType: Type, options?: { index?: number | undefined; injector?: Injector | undefined; ngModuleRef?: NgModuleRef | undefined; projectableNodes?: Node[][] | undefined; } | undefined): ComponentRef<...>', gave the following error. Argument of type '{ modalType: Modals; component: typeof AddNewUserModalComponent; title: string; }' is not assignable to parameter of type 'Type'.

Basically, when I open a modal, I want to send just a parameter e.g. Modals.ADD_NEW_USER and based on that to access the object from ModalTypes with this property name so I can have the component and title.

export enum Modals {
    ADD_NEW_USER,
    DELETE_CLASS,
    DELETE_STUDENT,
    BLOCK_STUDENT,
    ADD_NEW_CLASS, 
    CLASS_PROFILE,
    EDIT_CLASSROOMS
}

export const MODAL_TYPES =  {
    ADD_NEW_USER: {component: AddNewUserModalComponent, title: "Add New User"},
    DELETE_CLASS: {component: DeleteClassModalComponent, title: "Delete Class"},
    DELETE_STUDENT: {component: DeleteStudentModalComponent, title: "Delete Student"},
    BLOCK_STUDENT: {component: BlockStudentModalComponent, title: "Block Student"},
    ADD_NEW_CLASS: {component: AddNewClassModalComponent, title: "Add new class"},
    CLASS_PROFILE: {component: ClassProfileModalComponent, title: "Class Profile"},
    EDIT_CLASSROOMS: {component: EditClassroomModalComponent, title: "Edit Classrooms"},
}

My modal container that in which I want to be able to access the object with the enum type

export class ModalContainerComponent implements OnInit {
  @ViewChild('modalContent', {
    read: ViewContainerRef
  })
  modalContent!: ViewContainerRef;
  modalTypes = MODAL_TYPES;

  constructor(
    @Inject(MAT_DIALOG_DATA) public modalType: any,
    private viewContainerRef: ViewContainerRef) {
  }

  ngOnInit(): void {
    console.log(this.modalType)
    // const modal = ModalTypes[this.modalType];
    this.viewContainerRef.createComponent(this.modalTypes[this.modalType]);
  }
}

I also tried to create my object like this

export const MODAL_TYPES = [
    {
        modalType: Modals.ADD_NEW_USER,
        component: AddNewUserModalComponent,
        title: "Add New User"
    },
    {
        modalType: Modals.ADD_NEW_USER,
        component: AddNewUserModalComponent,
        title: "Add New User"
    }
]

but i still don't know how to access each object based on the enum

How can I access Modal types object property using Modals enum?

user_267887 · Answer

An enum at run time is a number, how you've defined it.

These are strings. They are not magically correlated.

export const MODAL_TYPES =  {
    ADD_NEW_USER: {component: AddNewUserModalComponent, title: "Add New User"}
...
}

You need to refer to the enum value when defining your MODAL_TYPES

 [Modals.ADD_NEW_USER] : { component....

Or look into string enums enum X { Y="MyString"}, but you'd still want to make the above change and not rely on the implicit correlation of strings. You can always log things to see what's going on, you'd see that your passed in modal types are numbers, and the object you're looking up the keys in would have no matching key.

Access object property using an enum type

1 Answers