0

I'm currently struggling with some very specific (detailed and dynamic) form, that uses a lot of custom made components with semantic-ui as CSS library.

I know that I can use ngClass to style inside my component. But, since it's a validation, i would like to add error class to the parent DOM element. I tried developing an extension of NgClass without any luck. My idea was to intercept ElementRef and give NgClass the one from the parent.

Maybe I'm doing this the wrong way, that's why i'm asking. What the best way to accomplish this task? Is it even possible?

I found this but it require to add one event handle for each component! It doesn't feel right.

genuinefafa
  • 703
  • 1
  • 6
  • 21
  • This is wrong way of thinking of things. Children components can't access parents without their consent. There's no idiomatic way to do this, unless you pass element reference to a child through an input . The cited answer shows a viable approach to do this. This depends on what you're trying to achieve. E.g. there may be involved a service that acts as event bus; still, parent component is responsible for changing its own class. – Estus Flask Jan 11 '18 at 14:25
  • Interesting... Maybe I should be thinking on adding some logic in parent element... a directive that read the `Child` control state? – genuinefafa Jan 11 '18 at 14:32
  • Possibly. It depends on your form. Is it reactive? Angular reactive forms naturally provide a way to handle this. Top-level FormGroup (i.e.
    ) is aware of all changes in children, then changes can be propagated to parents.
     – Estus Flask Jan 11 '18 at 14:40
  • Due to its complexity, I lean toward template based form, so yes, there is a `
     – genuinefafa Jan 11 '18 at 14:58

0 Answers0