DEV Community

Cover image for The Principles for Writing Awesome Angular Components

The Principles for Writing Awesome Angular Components

Giancarlo Buomprisco on October 08, 2019

Introduction This article was originally published on Bits and Pieces by Giancarlo Buomprisco Angular is a component-based framework, a...
Collapse
 
vitale232 profile image
Andrew Vitale

Thanks for such a great article!

I'm new to Angular, and I find that I'm drawn to using a small service to communicate between components rather than the @Input/@Output method you described. Can you explain why I/O is preferable?

Collapse
 
brooksforsyth profile image
Brooks Forsyth

I find using input output for view only components to be simpler. If I have a parent component whos child component is a button. The input could be the button text and the output would be emitting the click event. Then I can use that button everywhere and customize it.

If I made a service to keep track of button clicks it would require a new file and for that component etc...

I do think passing data thats more complex than that should be handled in a service.

Collapse
 
gc_psk profile image
Giancarlo Buomprisco

I agree, your comment is on point!

I would stress that ideally a dumb component should never access a service for state.

Of course I am quite sure there are situations where a service could be needed

Thread Thread
 
brooksforsyth profile image
Brooks Forsyth

haha I had dumb component written but changed it to view only component. I felt as if dumb may be offensive. Im not sure why components don't have feelings =)

Thread Thread
 
vitale232 profile image
Andrew Vitale

Thanks to you both. The considerations for I/O vs a service make much more sense to me now. Like most thing in programming (and life), it depends!

Collapse
 
gc_psk profile image
Giancarlo Buomprisco

Hi Andrew!

I think it depends a lot on what data you're passing. First of all, if your component is dumb, then it shouldn't require a service. That's where it's ideal to use inputs and outputs for communication. Watch our for this kind of situations.

If your container requires some state from a service, then by all means that's exactly how it should be done.

Collapse
 
mustapha profile image
Mustapha Aouas

Great article thanks for sharing

Collapse
 
gc_psk profile image
Giancarlo Buomprisco

Thanks for reading it! :)

Collapse
 
albertomontalesi profile image
AlbertoM

As a junior angular developer I really like your articles, thanks for sharing

Collapse
 
gc_psk profile image
Giancarlo Buomprisco

Thanks a lot! I hope you'll enjoy the next ones too!

Collapse
 
manueledones profile image
Manuele Dones

Good recap article!
Other tips I may suggest are the following:
-Do not be scared by using Content Projection. In my experience developers do not use it so much, they instead tend to add a lot of @inputs to cover all the possible configurations...
-Spend time to read how Angular Material /PrimeNg/ etc have implemented their components,I always find it effective.
-Add strict mode true to the typescript tsconfig.