Build a Toggle Component
Part 1 of Advanced Angular Component Patterns
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
‹ 00 Introducing Advanced Angular Component Patterns
02 Write Compound Components ›
Just like in Kent C. Dodds’ Advanced React Component Patterns, we will use a relatively simple <toggle> component to illustrate these patterns. The <toggle> component is responsible for managing a singleboolean property: on. The purpose of using a simple component like this is that the component itself would not distract from the relatively complex patterns we’ll put in place around it.
Throughout this series, I will include links to stackblitz.com projects with fully functioning examples. For the purposes of this series, you need only concern yourself with the app folder and the toggle folder. The toggle folder contains a reusable library that will change over the course of the series. The app folder and especially app.component.html will change to show how a user of the library will need to change their code to account for different scenarios.
We’ll begin with the most basic version of the <toggle> component. It has a single @Input() on which controls the state of the toggle and a single @Output() toggle which notifies the parent component when that state changes.
Please edit the code and experiment to familiarize yourself with stackblitz.com and with the toggle component before moving on to the next post, 02 Write Compound Components.
