title: How can i pass an Object from my Parent template to the Child Component
body: <p>i have a interface which looks like this </p>
  
  <pre><code>export interface IDropdownOption {
    guid: string;
    width: string;
    isRequired: false;
    fieldText: string;
    selectedItem: string;
  }
  </code></pre>
  
  <p>In my Child component i define an Input like this
  <strong>@Input() compInfo: IDropdownOption;</strong>
  and then in my Parent template i use the client like this</p>
  
  <pre><code>&lt;app-ig-dropdown
          compInfo.guid="820E04E0-8084-4D9C-A268-D8C0D21E74F6"
          compInfo.width="200px"
          formControlName="combo1"
          compInfo.fieldText="Social Media"&gt;
  &lt;/app-ig-dropdown&gt;
  </code></pre>
  
  <p>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 ? </p>