How to apply a global placeholder for DateInput?

[Patrick]

I understand how to apply custom placeholder values for individual components via the parameter on the component selector, but is there a way to apply a global placeholder value so that I don't need to remember to put it on every single individual DateInput component usage? I tried looking for a way to use the dependency injector to do this but it looks like injection tokens aren't used for this value (nor any of the other customizable parameters) and since it only uses the basic type of "string", I can't inject based on type either.

I thought also about using factory injection to try and override the constructor, but then I have to copy the constructor signature, which could then break in the future if you make updates to it. Not a huge deal since ideally this would only be defined in one place and thus I'd only have to make one change, but still a downside I'd rather not deal with.

Is there a predefined or best practice way to do this?

[Dimiter Topalov]

Hi Patrick,

There are a couple of general approaches to apply the same customization to multiple components of the same type - either use a custom Directive to customize the said component, or wrap the component in a custom wrapper component which has the original component with a predefined options inside. The second approach will not be very convenient in this use case, as the complications (like implementing control value accessor, having multiple inputs and outputs for configuration, etc.) will outweigh the benefit.

For minor or focused straight-forward customizations like setting a custom default value for some configuration option, the easiest approach would be to use a directive with selector that matches the one of the component (so that it is automatically applied to all components of this type and the developer will not need to apply the directive to all components separately).

The following example demonstrates the described approach:

https://stackblitz.com/edit/angular-p84p5h?file=app%2Fapp.component.ts

Providing another placeholder through the component's input is still working as expected:

https://stackblitz.com/edit/angular-1ofhb3?file=app%2Fapp.component.ts // check the last DateInput

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Patrick]

Thanks, both options ended up working perfectly for me (I needed a wrapped component for another slightly different problem).