Problems with wrapper component in Angular 6

Question

I want to create a wrapper component for saturn-datepicker, as the plan is to use it in a few different applications for now and possibly switching it out at a later time. I am quite new at Angular, but forked and created a "working" example from a Stackblitz I found here .

The problem is that it is only working in edit-mode - when I try to run the code in VS Code, or with the normal link, I get the error

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '#' is 
not a valid attribute name.

I guess this has to do with how I set the name for the input - and it probably is related to the initial stackblitz being set up with Angular 5? Any pointers on how to fix this would be greatly appreciated. Also, what is the best practice for retrieving data (like startdate, enddate) from the different child elements?

Edit: I'm trying to create a "wrapper" around the datepicker - so that it can be implemented and used in applications now, but swapped out with a different one at a later time (changing only code inside the wrapper, not in the applications themselves). Right now this case is specific to the datepicker, but it is possible the same would be needed for other libraries later.

Answer 1

This stuff that has been done on your code are pretty out of angular code style and out of common sense.

<sat-datepicker #${name} [rangeMode]="true">

You can't do stuff like this on your template. This is completly pointless. Logic of your hello.component are completly encapsulated from outer world aka components. You dont need to change internals of this component. You just need to listen what your hello component will Output .

You should name give your input a name in a regular way like this

<sat-datepicker #name [rangeMode]="true">

And all other ${name} because this is wrong .

Anyways you can't access to it from parent components to use some dynamic names. In some cases you do but it is pretty advanced and specific to problem.

Answer 2

Let's consider the order in which things happen:

1. The component is created.
2. Your template is loaded. At this point, the interpolation is also done.
3. Your @Input properties are processed and receive their values from the call site.

And that's the problem. By the time your template loads, the value of name is still undefined. That leaves you with this invalid Angular template:

The point that Kraken made (I think) was that even if the template variable name is successfully replaced in your template, it won't be usable to the call site.

You could have this:

<form>
  <app-datepicker-component name="one"></app-datepicker-component>
  <br><br>
  <app-datepicker-component name="two"></app-datepicker-component>
</form>

But then what? @ViewChild won't find the component, because it is not accessible outside <app-datepicker> itself.

Perhaps, if you gave a little context, we can help find a solution to the problem you're trying to solve.