Angular button: real world reusable component

Reusable components are a great approach when things gets larger.

But, if you’ve worked if Angular for awhile you probably have seen a bunch of inflexible components fulfilled with business logic and lots of use cases. Now let’s build a real world reusable component.

Said that, let's start the development of our component. First things first, now you need to create your project and component(you could also create a module for the component, it's a good practice when working with libraries). I'm not going throw these steps here since it's a very basic implementation. But, you can follow the Quick Start of the Angular team.

After the steps above, let's create the html template of the component.

Button HTML Template

For the HTML template we are going to define some key elements.

In this example we are creating a flexible content injection.

• wrapper: container for button's content injection;
• ng-content: mainly for text injection;
• ng-content: for icon injection;

SCSS style for button component

Here is the style from the button template.

Note that it's is a simple component and it do not contains many variations, you need to adapt to your needs.

The variations are: primary/secondary/outline

@function rem: execute conversion from pixel to rem. A good css measure practice.

We also can abstract it to a _mixins/_functions file and use sass modules to @forward.

$colorMap: Here we create a mapping function of all colors variations and groups.

It'll be use to generate classes for color dynamically by color-modifiermixin.

@mixin color-modifier: This mixin helps us creating one class for each ruleset in the color-group of $colorMap.

It uses the @each from sass to perform iterations over the mapping function.

We also have styling for outline and icon variations.

I kept it simple by using icon as an img element, but you can increment this example adding support for svg libs and stuff.

Button props interface

To organize our code, I decided to create a simple interface to define the props for button component.

Button ts file

Here we need to change the selector atribute on the component decorator.

We put it in this way, so we can use the component like this:

<button customButton></button>
<a customButton></a>

@Input : We use input to define color/iconAlign and outline type. In the outline input we used a set function to handle the input itself and ensure that we have a input value or not, so we can use it in this way:

<a customButton outline></a>

@HostBinding : Decorator that marks a DOM property as a host-binding property and supplies configuration metadata. See docs here.

Here we use hostBinding to bind the right css class for the right button type.

Good job!

Now let's use the component we developed.

To show the example in a good away we can use as the following.

The rendered component should look like this:

Very nice! But how about unit testing?

Here you can see the following article where we test the button component that we developed in this article. Angular: configure and test with jest.

I hope you did like the article, see you soon!