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?

Is it necessary to use a directive? Do you need the uppercased value only for visualization? If it is only for the UI you can use a Pipe. Take a look at your modified example: stackblitz.com/edit/structural-directive-binding-8w5kbt — kedenk
– kedenk, Commented Sep 20, 2018 at 15:01
@kedenk uppercase is only an example. Uppercase could alse be done by CSS. In fact, is is more complex and has to work with incoming and outgoing data (see formatters / parsers in ng1 or ControlValueAccessor in components). But it has to be a structural directive, because I have to manipulate the DOM (what I omitted in this example, cause ist's not relevant to my question). — westor
– westor, Commented Sep 21, 2018 at 4:39
It would help to understand what are you really trying to achieve because with an example like this it seems like a bad use case for a directive — Vojtech
– Vojtech, Commented Sep 23, 2018 at 9:56
@Vojtech - please see my accepted anser. Consider a maks behind an input control. On the one hand I have to do some DOM manipulation and on the other hand I want to implement manipulation of incoming and outgoing data of the input. Using these 2 kinds of directives in conjunction gives me more flexibility with the native control then a custom control. — westor
– westor, Commented Sep 24, 2018 at 7:55

gr4viton · Accepted Answer · 2018-09-24 07:57:36Z

2

+50

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.

edited Sep 24, 2018 at 7:57

answered Sep 22, 2018 at 12:55

gr4viton

1,5141 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

westor Over a year ago

That seems to be the way to go here. The attribute directive can implement the controlValueAccessor Interface, and will allow manipulation of input and output stream. And the structural directive can do the dom related part. It looks like you are right, I have to separate both tasks.

Collectives™ on Stack Overflow

How to manipulate data binding in structural directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related