Updated March 31, 2023
Introduction to Angular Material Button
Angular material also provides us very interactive and attractive button which can be used to perform any action based on click, or we can say on any event. Angular Material is a powerful library that provides very good styling to design our application, also very good documentation to start with it; any beginners can start using it if they have little knowledge about angular how it works. For angular material buttons, it is a native button tag or a <a> tag with ink ripple and material designing property. They provide us with various types of a button with different styling on it, we can choose it as per our need, to use this button property we do not require to make any configuration into the code, also not required to add any module or packages in our project. We just have the angular material setup is ready. In the coming section, we will have a closer look at the various type of buttons and their styling in the material in detail.
Syntax
In this section, let’s have a look at the basic type of button available in material to start with, see below;
<button mat-button color="mentioned_ color">button text</button>As you can see in the above line of syntax, we have just used the mat-button to use the material button in our HTML; let’s have a practice syntax for more better clarity for beginners see below;
e.g. :
<button mat-button color="warn">Warning!!</button>In the coming section, we will see the other types of buttons available and also their usage in practical with an example for each one.
How to Create Button in Angular Material?
As we already know that in angular material, we have a different module for different features for it, which increases their reusability in the application, so for the button, we have two modules which can be used according to our requirement; we have two types of a button here one is a simple button, and other one is a toggle which can be used in the specific area. In this section, we will see how we can create a button in angular material also the configuration which is required to run this properly; let’s get started;
1) we need to add the MatButtonModule to our root module if we want to make use of the button from angular material. This is the module that is present inside the; ‘@angular/material/button’; we just have to define the path for your reference, I am attaching a piece of code for better understanding see below;
e.g. :
import {MatButtonModule} from '@angular/material/button';2) If you want to make use of the toggle button in your application, then we have to import the MatButtonToggleModule from the material library; this module is present inside the ‘@angular/material/button-toggle’; we just have to define the path and need to import it inside the root module or any other module as per your need. For reference, I am attaching a piece of code for understanding purpose;
e.g. :
import {MatButtonToggleModule} from '@angular/material/button-toggle';Now we have one more step to make use of the material button in our application; see below;
We have ‘mat-button ‘ or different types of properties for different types of a button from angular material; in the example section, we will see with a practical example how we can use it; below is the step to setup the angular material in the project;
1) First, install the Angular CLI, which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;
e.g. :
npm install -g @angular/cli)The above command will install the CLI globally in our system; hence we can use it globally when required.
2) Now, in this step, we will try to create the new angular project from scratch; this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your command Promat, and press enter see below;
e.g. :
ng new your project name
ng new my-first-projectThis command will create the project with the name my-first-project; you can create your project with any name mentioned.
3) Just to make sure, try one command which is mentioned below to install all the required library into our project,
e.g. :
npm install4) Now, you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has created without any error or bugs inside it.
e.g. :
ng serve5) go on browser and try to run the application with the below URL :
e.g. :
http://localhps:4200
By default, angular project run on the port 4200; you can change it as per your need if required.
6) Now everything is set, we have our angular project now we will add the material library to our project just by running the below command on the command prompt;
e.g. :
ng add @angular/materialExample of Angular Material Button
Given below are the example of Angular Material Button-
1) Root module :
import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
@NgModule({
exports:
MatButtonModule,
MatButtonToggleModule
]
})
export class MaterialDemoModule {}[2) TS code:
import {Component} from '@angular/core';
/**
* @title button demo
*/
@Component({
selector: 'button-demo',
templateUrl: 'button-demo.html',
styleUrls: ['button-demo.css'],
})
export class ButtonDemo {}
3) index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Button demo !!</title>
</head>
<body class="mat-app-background">
<button-demo>Loading ..</button-overview>
<span class="version-info">Current build: 12.0.4</span>
</body>
</html>4) HTML code:
<h5><u><i>Button demo in Angular material !!</i></u></h5>
<mat-divider></mat-divider>
<section>
<div class="example-label">Demo Raised button </div>
<div class="example-button-row">
<button mat-raised-button>I am Basic</button>
<button mat-raised-button color="primary">I am Primary</button>
<button mat-raised-button color="accent">I am Accent</button>
<button mat-raised-button color="warn">I am Warn</button>
<button mat-raised-button disabled>I am Disabled</button>
<a mat-raised-button href="https://www.google.com/" target="_blank">I am Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Demo Stroked Button </div>
<div class="example-button-row">
<button mat-stroked-button>I am Basic</button>
<button mat-stroked-button color="primary">I am Primary</button>
<button mat-stroked-button color="accent"I am>Accent</button>
<button mat-stroked-button color="warn">I amWarn</button>
<button mat-stroked-button disabled>I amDisabled</button>
<a mat-stroked-button href="https://www.google.com/" target="_blank">I am Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Demo Basic button</div>
<div class="example-button-row">
<button mat-button>I am basic</button>
<button mat-button color="primary">I am primary</button>
<button mat-button color="accent">I ama accent</button>
<button mat-button color="warn">I am warn</button>
<button mat-button disabled>I am Disabled</button>
<a mat-button href="https://www.google.com/" target="_blank">I am Link</a>
</div>
</section>Output:
Conclusion
This button from the material is very easy to use; we have already seen on practice examples for each of the buttons. We need not to worry about the styling of the button; it will take care of the material itself.
Recommended Articles
We hope that this EDUCBA information on “Angular Material Button” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
