I am currently working on a component that is designed to receive two inputs through its selector. However, I would like to make it flexible enough to accept any number of inputs from various components. Initially, I tried using a single @Input() decorator to consume multiple properties in the component itself, but found that this approach was limiting. As a workaround, I ended up using two decorators for two input properties. While this solution works, I am wondering if there is a more efficient way to handle this scenario.
export class AsyncComponent {
@Input() waitFor: boolean;
@Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props
}
Update
<app-async [waitFor]="true" message="foo"><app-async>
Is there an alternative method that would allow me to use just one decorator to handle any number of input properties? If I need to pass additional properties other than waitFor and message, would I be required to create separate decorators for each?
@Input() waitFor: boolean;
@Input() message: string;
@Input() someOtherProp: string;
....
Alternatively, is there a more streamlined approach that would enable me to utilize a single Input decorator to consume any number of properties?