How To Create a Reusable Button Component in Angular

Avoid code repetition and build efficient applications

Alessia Amitrano
Nov 28 · 3 min read
Photo by James Pond on Unsplash

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.

Input Configuration in ButtonComponent

The object will contain the styling and additional information about which kind of button we want to render: if we want a text button, the will contain a 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.

Using the pattern, we can specify when to render each one.

In this case, if the configurations contain the property, the template will be rendered; if there’s no property, the rendered template will be .

ngTemplateOutlet syntax

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 through interpolation. The image button is just a clickable image that will have the property 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 object and an 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 styling in a TypeScript object, we’ll need to use the camelCase format when naming the properties! Hence becomes , etc.


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:


Conclusion

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.

Icons made by Freepik from www.flaticon.com

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Alessia Amitrano

Written by

Front End Web Developer @Imagination, London. Angular enthusiast, CS and Maths part-time student. Dungeons and Dragons player!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade