How to manipulate data binding in structural directive

Question

I have a structural directive, handling an input control (and doing something more with DOM in real world). Please see this example https://stackblitz.com/edit/structural-directive-binding .

I need something for manipulation of the inputs value. In this example I want to enter 'angular'. The displayed input value should be 'ANGULAR' but the model value should still be 'angular'.

I need to support both, template and model driven approach.

If I would create a component, I would implement the ControlValueAccessor interface for this task. But I think, this is not working on a structural directive. In angular.js I would have formatters / parsers for this job. What is way to go here?

Answer 1

I think that there is two different problems. Show manipulated data on UI and do something with the DOM. I am not sure you can do what you want in a single directive like that, because of ngModel behavior.

I suggest to use attribute directive / pipe (built in uppercase or a custom if you want) to manipulate the appearance of the input value, and a structural directive to the DOM manipulation.