-2

What's the best way to reset a child's component state in Angular? E.g. resetting a child's form.

I've developed 5 possible solutions:

  1. Child listens to a primitive value (boolean) that it receives via @Input. Using setTimeout, otherwise the change is too fast and the child will not register. See scenario 3 in StackBlitz.
  2. Passing an observable to a child component. Scenario 4 on StackBlitz
  3. Using a complex data structure (object). If you create a new object every time, the child will think it's completely different, thus being able to correctly trigger it's reset form function. Scenario 5 on StackBlitz
  4. ViewChild. Scenario 6 on StackBlitz
  5. Creating the formControl on the parent and passing it down to the child. Scenario 7 on StackBlitz

https://stackblitz.com/github/laurensdewaele/parent-child-angular-react/tree/master/angular-example

laurensdewaele
  • 17
  • 2

2 Answers2

0

The first question is, do you really need the child component? Don't fear a slighty bigger template, when you spare the hassle. Also you could make use of ng-template, if necessary.

In the examples above I miss at least the ngOnChanges option. I think the best options are described well here: How to emit an event from parent to child?

MoxxiManagarm
  • 8,735
  • 3
  • 14
  • 43
  • The parent component in this case was actually quite a big one, that had to do a lot of data fetching. The child component was a really big form as well, so I did not want to put them together. As for the ngOnChanges option, it's similar to the setter, no? – laurensdewaele Jul 09 '19 at 13:02
  • Simelar for sure, but not the same. I saw another option in productive code, where the child component created the form entirely and emitted it back to the parent after init.The parent hold a reference after. After all I don't think you can say one of all those possibilities is really the best. It depends on your usecases. – MoxxiManagarm Jul 09 '19 at 13:14
  • What does ng-template do for us in this case? – laurensdewaele Jul 10 '19 at 09:00
-1

  1. Best way is not using 100500 components if you dont' need reuse them. In this case, 1 component for all input (or NO components. all in app.component) and component for button it's not good.

  2. It's №3, if app.component has many child components.

Stas Golubev
  • 34
  • 5
  • No mention of how services, regular classes, pipes, etc...might organize code better then many components. However, these examples are for learning, so I wouldn't assume these are going to be applied to the real-world. – TamusJRoyce Feb 01 '21 at 21:23
  • What's the point of this? example not used in real life? why is this example needed then – Stas Golubev Feb 04 '21 at 05:08
  • Because this is a proof of concept. Prove that your components work together without lazy loading first. Then implement lazy-loading. Having 100500 components available doesn't mean they are available client-side all at once. Maybe only 15 are used at a time. But you can switch views across all 100500 – TamusJRoyce Feb 04 '21 at 21:38