Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

Angular

How to create a reusable button component in Angular

Create a reusable button in your angular project

In this article, we are going to create a reusable and customizable button component that can be used in your projects

Hope you have already created a project and I will directly start by creating a new button component.

Run the following command in the terminal to create a button component inside the component folder.

ng generate component component/button

Now let’s think about what kind of properties you need to control the button when creating it as a component. I have listed a few properties below

  1. Button name
  2. Should be able to set method which needs to be executed when clicking the button
  3. Button disable and enable state

These are the few things that are required for me.

First, open the button.component.ts file and add the required Input that we are expecting.

To pass the property values to the component you can use the @Input decorator and specify the variable name

import { Component, OnInit, Input } from '@angular/core';

@Component({
	selector: 'app-button',
	templateUrl: './button.component.html',
	styleUrls: ['./button.component.scss']
})
export class ButtonComponent {
	@Input()
	set text(name: string) {
		this.buttonText = name.toUpperCase();
	}
	get name(): string {
		return this.buttonText;
	}

	@Input() color: string = '0068B4';
	@Input() type: string = 'button';

	public buttonText = '';

	constructor() {}
}

For the text input, I have added to convert values to upper case. This can be done using CSS also.

Next, we need a way to handle the click events. Here you need to emit the click event from the child component to the parent when someone clicks the button. For that, you need to use the @Output decorator. The final code will be like below.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
	selector: 'app-button',
	templateUrl: './button.component.html',
	styleUrls: ['./button.component.scss']
})
export class ButtonComponent {
  public buttonText = '';

	@Input()
	set text(name: string) {
		this.buttonText = name.toUpperCase();
	}
	get name(): string {
		return this.buttonText;
	}

	@Input() color: string = '0068B4';
	@Input() type: string = 'button';
	@Output() btnClick = new EventEmitter();
	@Input() isDisabled = false;

	constructor() {}

	onClick() {
		this.btnClick.emit();
	}
}

Next, open the button.component.html file and add the following code to that.

<button
	[type]="type"
	(click)="onClick()"
	[disabled]="isDisabled"
	class="btn">
	<span>{{ buttonText }}</span>
</button>

You can bind property values that I was created previously in the HTML template.

Also, you can use the following styles as well.

.btn {
	background: rgb(71, 71, 221);
	border-radius: 5px;
	color: white;
	font-weight: 400;
	width: 100%;
	height: 45px;
	font-size: 16px;
	font-family: 'Roboto';
	border: 0px;

	&:hover {
		background-color: rgb(29, 29, 218);
	}
}

If you want to use this button anywhere in the app you can use app-button selector for that.

<app-button (btnClick)="clickHandler()" text="CLICK ME" [isDisabled]="false"></app-button>

If you want to change the selector, you can change the selector property of the component.

@Component({
	selector: 'mt-button',
	templateUrl: './button.component.html',
	styleUrls: ['./button.component.scss']
})
<mt-button (btnClick)="clickHandler()" text="CLICK ME" [isDisabled]="false"></mt-button>

When you are using the component make sure you are using the property names which is defined in the custom component.