How To Create a Reusable Button Component in Angular
Avoid code repetition and build efficient applications
One of the first concerns of a good web developer is writing clean code and avoiding repetition. This strategy becomes a necessity when developing large, scalable applications that could be expanded with new features in the future.
Reusable components can make the difference between a successful project and one with high technical debt.
In this article, we will build together a reusable, customizable button component that will be able to display text buttons or image buttons according to the provided configuration.
Step 1. Base Structure
First of all, when thinking about the structure of a reusable component, we need to take into consideration all the uses we want to make of it.
In the case of a reusable button, we want to create a presentational (or dumb) component that will receive the correct configuration from its parent component.
buttonConfig will contain the styling and additional information about which kind of button we want to render: if we want a text button, the
buttonConfig will contain a
text property; otherwise, if we want to render an image button, the configurations will specify an image source.
The HTML code will contain two different templates, one for text buttons and one for the image buttons.
ngTemplateOutlet pattern, we can specify when to render each one.
In this case, if the configurations contain the
text property, the
#text template will be rendered; if there’s no
text property, the rendered template will be
Step 2. Buttons Markup
Now that the templates are ready, we can fill them with the code for the buttons.
As you can see, the text button will display the property
buttonConfig.text through interpolation. The image button is just a clickable image that will have the property
buttonConfig.src as its image source.
Step 3. Configuration
With the button component ready to receive its configuration as input, we can define our custom styles in the parent component.
In this case, I have chosen to create a
textBtnConfig object and an
imgBtnConfig to show you how I’ll use the button component to render two different instances at the same time and with different configurations.
It’s important to notice that since we are declaring the
CSS styling in a TypeScript object, we’ll need to use the camelCase format when naming the properties! Hence
Step 4. Rendering
Finally, we can use the button component to instantiate two buttons in the parent component:
Once the app is served, the result will be similar to this:
We have seen how to build a reusable component that can be used in many different situations. Obviously, this here is a simplified case, but it shows the approach a developer should use for this kind of challenge really well.
Just think about how much code we would have written without a reusable component!
Moreover, reusable components allow implementing new features for every instance of the component with the minimum amount of changes to the code. If we wanted to add a new method, it would be available for every button, no matter if it’s a text or an image button.
You can find the full example implemented by me in this GitHub Repo.