reacting to events from a dumb component

[primal wharf]

How do I react to events (like resetting a form) from a dumb component?

What I currently do is subscribe to the event directly from the component (this makes it a smart component though)

Another solution I thought of is exposing a function that resets the form, and using viewChild in the smart component to reset it from there (this seems better than what I have)

How would you approach this?

[steady gyro]

The most clean approach communication with a dumb component is through inputs/outputs. If it is impossible to do so, this might mean that the component is not really dumb imho because it depends on depends on something that should be controlled by the business logic while the dependency is implemented in the component.

I would simplify the component and make it more dumb. I would pass a form as an input parameter from the parent (which is responsible for the business logic) and the component would be in charge of only presenting the form following some rules and emitting events back to the parent in necessary so that the parent takes over the full control of what the dumb is presenting.

[primal wharf]

Passing the form as an input seems better than using viewChild + exposed function for reset.

What do you think about making the event as an input?

event = input.required<void>();

private formDir = viewChild.required(FormGroupDirective);

constructor() {
  // or use effect + use untracked on formDir
  toObservable(this.event).pipe(takeUntilDestroyed()).subscriber(
    () => this.formDir().resetForm()
  );
}

Is this bad design?

[steady gyro]

is this a code snippet of the parent?

[primal wharf]

Of the child

[steady gyro]

Are you sure? I don't get it then 🙂 Could you provide more of the context?

[primal wharf]

Since the event is coming from the parent component, why not just pass the event via an input in the child component, from there react to the event using effect/toObservable (to reset the form from there).

Did I make it clear, apologies for the confusion

[steady gyro]

Ok, thanks for clarification @primal wharf 👍 it is just me, sometimes I cannot get things with ease 😄

first question - Can we consider input an event?
second - can you pass void value to the child input?

I am asking, cause from the code perspective it looks a bit confusing, doesn't it?

[primal wharf]

The event I'm talking about is a success event, I guess it could also be considered as a state. The passed value doesn't have to be void, it would most likely be boolean.

So something like this

export class ChildComponent {
  onSuccess = input.required<boolean>();

  constructor() {
    // reset the form here...
  }
}

[steady gyro]

Yeah, I am not talking about the namigns, value types and so on. I am talking about mixing the responsilibities. Of course, we can do everything while coding.

I've asked the question to point out that there is something wrong in the concept itself in my opinion. In general, there is a mix of responsibility delegation becasue the form can be controlled by both the child and the parent, which is kinda "anti-pattern" that is gonne lead to more problems with the code.

[primal wharf]

I see, that's why before I asked if it was "bad-design", and yes I agree it seems that there is mixed responsibilities going on if this is used. Thanks for you time and help!