Properly rendering components depending on the type of the object in a prop with multiple...

I'm working on a form and have a property that will be one of several types. I created this custom type for the property.

export type IngredientDataGroupType =

FormGroup< FlourProfileGroup > |
FormGroup< SaltProfileGroup > |
FormGroup< SugarProfileGroup > |
FormGroup< GrainProfileGroup > |
FormGroup< NutProfileGroup > |
FormGroup< SpeciesPrimative > |
FormGroup< DairyProfileGroup > |
FormGroup< ProduceProfileGroup > |
FormGroup< OilProfileGroup > |
FormGroup< HerbProfileGroup > |
FormGroup< ExtractProfileGroup > |
FormGroup< SweetenerProfileGroup >;


I apply this type to an @Input() in my component and started to set up an @switch statement in my template file to toggle the appropriate component. I also have another @Input() for passing in a value to determine which @case to return. Seeing that all my Profile components are strictly typed none of the will accept type IngredientDataGroupType which means I have to return the data as the type the component accepts. Instead of bloating my component by handling it like this.

export class MyComponent {

@Input() Control! : IngredientDataGroupType;
@Input() ProfileType! : IngredientProfileType;



flourProfile() : FormGroup< FlourProfileGroup > {

return this.Control as FormGroup< FlourProfileGroup >;

}

saltProfile() : FormGroup< SaltProfile > {

return this.Control as FormGroup< SaltProfile >;
}

// etc. etc. for each profile

}


So instead I figured I'd do this

export class MyComponent {

@Input() Control! : IngredientDataGroupType;
@Input() ProfileType! : IngredientProfileType;



getControl< GroupType extends Record< string, AbstractControl< any, any > > >() : FormGroup< GroupType > {

return this.Control as FormGroup< GroupType >;

}

}


and use it like this in my template

<section class="mainContainer"[formGroup]="Control">



@if( Control !== undefined ) {

@switch ( ProfileType ) {

@case ( 'flour' ) {

<lib-flour-profile
ngDefaultControl
[Control]="getControlGroup<FlourProfileGroup>()"
/>

}

}

}



</section>


I'm getting a couple of errors, one in regards to the <lib-flour-profile /> component's [Control] input saying it can't accept type boolean, then one with the getControlGroup() method saying it's possibly undefined.

Why is the getControlGroup() method returning type boolean? This is just something I was trying to see if it would work, can we even infer types like this in the template? How can I go about achieving this type of functionality?

Continue reading...