Angular

Create a reusable Button Component in Angular

Create a reusable button in your angular project

Creating a reusable button component in Angular save a lot of time than copy-pasting button code here and there.

Hope you have already created a project and I will directly start by creating a new button component. Execute the following command 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 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.

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. So what we need to do is we need to emit the click event from the child component to the parent when someone clicks the button. For that, we 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 following code to that.

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

In here you can bind property values that I was created previously in the HTML template.

Also, you can use the following style 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 in anywhere in the app you can 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.

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124