How can i pass an Object from my Parent template to the Child Component

Question

i have a interface which looks like this

export interface IDropdownOption {
  guid: string;
  width: string;
  isRequired: false;
  fieldText: string;
  selectedItem: string;
}

In my Child component i define an Input like this @Input() compInfo: IDropdownOption; and then in my Parent template i use the client like this

<app-ig-dropdown
        compInfo.guid="820E04E0-8084-4D9C-A268-D8C0D21E74F6"
        compInfo.width="200px"
        formControlName="combo1"
        compInfo.fieldText="Social Media">
</app-ig-dropdown>

Doing so will always generate me errors that the property of any of these values defined in object compInfo are undefined. Is it even possible to use an Object as the @input and then set the values from the parent template? I am trying to avoid declaring 50 + inputs as i might have 10 child components on the parent which each has 5 param. If this is not supported how else can i make this more clean?

Answer 1

Ultimately i was able to solve the issue by assigning the values in my parent template like this.

<app-ig-dropdown
       [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 1'}"
        formControlName="combo1"
        >
</app-ig-dropdown>
<app-ig-dropdown
        [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 2'}"
        formControlName="combo2"
>
</app-ig-dropdown>