Blog post by Giancarlo Buomprisco on how to learn to maximize reusability in your Angular components by using composition instead of inheritance.
Authors favorite way is to compose components in small units and use Inputs and Outputs to communicate between components. In order to share logic pieces between components, he likes how Mixins can help us avoid some pitfalls from using class inheritance. Author focuses more on the relationship between Class Inheritance and Class Mixins, how they differ, and some pitfalls from using Mixins for building components.
Use tools like Bit (Github) to increase code reuse by sharing and collaborating on Angular components across projects. Share your reusable building blocks to a collection on bit.dev, for future compositions.
The article then deals with:
- The pitfalls of Class Inheritance
- Typescript Mixins
- Scenario: A social media aggregator app
- Building a base post component with Inheritance
- Enter Composition
- Pitfalls of using Mixins
Try not to apply too many Mixins; if you have too many Mixins, maybe you should split the component into several components and use component composition with inputs and outputs to communicate between each other. Some good advice here!
[Read More]