Angular: simplest way to visually handle api-request-errors from child-component in parent-component (parent uses router or dynamic components)

Question

Let's say I have a parent element with router-outlet that routs to children-components. Like in the first 10 seconds of the fireship youtube tutorial: https://youtu.be/Np3ULAMqwNo

I have 10 different but similar child-components. The child component will do some API-requests. How can the parent-component display what went wrong in the API request? I don't want to write the same error-display code 10 times. Should I define some different error-codes and pass them up somehow?

Is it smart to use a router in that case even? What are the alternatives? Make requests in parent and send to child? But then how do I pass a complex response down the router-outlet?

Or can you create a generic "interface" component like in JAVA which has the error-handling and then specify the rest in the implementation of that component? If someone could point me to the right "construct" to do that, please. I researched a bit and found nothing.

I just want to prevent 10x repeated code to show the error in the children.

edit: I am also considering to use ngSwitchCase in parent to select the child-components instead of using routing. Is this maybe the best way to do it here? Binding lots of data between parent/child wouldn't be a problem here, you could probably communicate errors from the child component to the parent component. But how, with what "CONSTRUCT" would this be done the best?

Answer 1

When you use the router, an injector is created to handle dependency injection.

Thanks to it, you can access all the parents pretty easily.

Here is a demo

export class ChildComponent  {
  constructor(
    private parent: ParentComponent
  ) {
    console.log(parent);
  }
}

This is the cleanest, quickest way to do what you want.

Now, some people will come and say "blablabla this thightly couples your components and prevent reusability".

Well, yes, but 99% of the time people don't look to reuse components. If they do, then they find other ways, such as using a service.

Now, as for the solution you implemented : I would NOT use the router to do that, but rather display the components dynamically. That's how Angular thought about it : depending on a condition, you display the component you wish.

Also, another solution you can think of, is to make a single component that sets up himself depending on the configuration your provide to it, instead of having dozen of components that do almost the exact same thing.

Answer 2

You could do the requests in the parent component.

Then, you can pass information through routing. Normally, you would use route parameters for this. But for complex objects which you don't want to display in your URL you can do something like this:

this.router.navigate(["childComponentPath"], { state: { data: <response> }});

and then in your child component you can retrieve the data like this:

this.data = this.router.getCurrentNavigation().extras.state["data"]

UPDATE:

So while creating a StackBlitz demo for this solution, I found there is a tiny problem if you refresh the page. Because the data are passed on navigation, if you refresh the page you lose the data.

So you will either have to redirect back to the "home" route (already implemented in StackBlitz), or use a different solution altogether.

As an alternative, you could make the requests in your child components and communicate the error with a service to your parent component.