DEV Community

tonnerkiller
tonnerkiller

Posted on

Communication between Siblings in Angular - and other noobities

This article was first published on: http://blog.tonnerkiller.de/posts/angular/

Recently I've been working with Angular. And meanwhile I've found out that these CLI scripts to get you up and running are common not only for React, but also Angular, Elm and probably all other frameworks out there.

But this is not another blogpost on a CLI or how to set up things. This is about Angular. Like the parts I found nowhere described whan looking for info on the internet.

By the way, when I say Angular I mean Angular, i.e. Version 2 or higher, not Angular JS which seems to be - despite the name - a whole different thing.

So what I was missing when making my first steps with Angular was some words of overview. I found all kind of descriptions how to make Components, how to use Services, or Structural and Attribute Directives, how to get data from parent to child component and back through @Output() and @Input() decorators and even two-way-binding.

But what I missed was how to actually bring these things to a sensible combination. I knew about data passing between parents and children. But what about if I need information interchange between say grandchildren or grandgrandchildren. Would I have to pass it all the way up to the grandparents and then down again to the grandsibling?

This appeared to me, at the time, as utterly clumsy. Why not have a direct connection. Qt offers such a thing with their slots. I figured Angular would too, and I tried to achieve it using services and Directives and what not, always running into a wall sooner or later. The simple reason was: THIS. IS. NOT. SUPPOSED. TO. BE. DONE.

If I am wrong here, please tell me. But as things are now I figured the following:

  • Angular is meant to isolate the components so that you can reuse them somewhere else.
  • This means each component needs a clearly defined interface of inputs and outputs.
  • This can best be achieved when you use - well, Inputs and Outputs, the decorators you have for that.
  • Getting data from siblings rather than from parents or children would violate this approach. Then you'd have inputs and outputs up and down the line, but also across to siblings. A mess.
  • Also this could lead to having to use certain siblings together, you cannot have the component in question alone.
  • Thus, Angular wants you to pass data up and down the line. It's the way things are supposed to be. It's a feature.

This is why, I finally drew the conclusion what things are here for:

  • structural directives to have dynamic HTML
  • attribute directives to have some dynamics in elements, either for styling or for adding smoe logic, like input validation or just adding some event listeners
  • services to communicate with the outside world, be it http requests or file system I/O.
  • decorators... well, I'm on that. They seem to add additional functionality to stuff. I've seen them in other languages like Python, but I have not yet grasped the idea.

And so on. I guess for most this is common sense and not worth mentioning. For me it took quite a while to arrive at this conclusion myself because I found nobody telling me.

Top comments (0)