Angular Material - Buttons

In this Lecture let's take a look at angular material buttons, angular material buttons are basically native button tags or anchor tags enhanced with the material design we had a quick look at angular material buttons previously in the getting started lecture, now let's take a more detailed look.

To make use of angular material buttons we need to import the material button module so in material.module.ts import the MatButtonModule and added to the material components array.

import { NgModule } from "@angular/core";
import { MatButtonModule } from "@angular/material";

const MaterialComponents = [MatButtonModule];

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents]
})
export class MaterialModule {}

Now let's go to app.component.html, to create the simplest of material buttons we add the mat-button attribute, so a button tag with the mat-button attribute like this.

<button mat-button>Click Me!</button>

Save this and take a look at browser and you'll see a material button. Now let's take a look at some of the variants, the first variant is the raised button the attribute is mat-raised-button.

<button mat-raised-button>I'm a raised button</button>

The next variant is the flat button the attribute is mat-flat-button.

<button mat-flat-button>I'm a flat button</button>

We also have a variant that applies just the outline the attribute is mat-stroked-button.

<button mat-stroked-button>I'm a button with outline</button>

Now let's save this and have a look at the browser.

<div>
  <button mat-button>Click Me!</button>
  <button mat-raised-button>I'm a raised button</button>
  <button mat-flat-button>I'm a flat button</button>
  <button mat-stroked-button>I'm a button with outline</button>
</div>

Because the buttons are closer to each other let's add some margin to our app.component.scss.

button {
  margin: 3rem;
}

angular material buttons

Now you can see the difference between the raised button and flat button and stroke, the flat button is the default behaviour, apart from this we also have the circular buttons in angular material, again there are 3 variants:

  • Icon Button the attribute is mat-icon-button
  • Fab Button the attribute is mat-fab
  • Mini Fab Button the attribute is mat-mini-fab
    <div>
            <button mat-icon-button>Icon</button>
            <button mat-fab>Fab</button>
            <button mat-mini-fab>Mini Fab</button>
    </div>

angular material circular buttons

Let's save and take a look at the browser, we have icon button which is a circular button with a transparent background, fab button which is a circular button defaults to accent color of your theme and the mini-fab button which is just a smaller version of fab button so these are the variants for circular buttons.

Next let's talk about Button Colors, when it comes to material there are 3 colors we talk about primary, accent, warn colors, to apply the color we make use of the color attribute on the button element, let's create 3 buttons and add the colors.

<button mat-button color="primary">Primary Button</button>
<button mat-button color="accent">Accent Button</button>
<button mat-button color="warn">Warn Button</button>

angular material button colors

If you take a look at the browser you can see the button text in different colours primary, accent and warn. How the colours applied are based on the variant of a button, if we were to apply the same colours to raised buttons, for example, we just need to change the attribute.

<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn">Warn Button</button>

angular material button ripple disabled

Save the file and you will see the difference based on the type of the button the colour is added to the element. The last thing we'll see is how to disable ripple effect right now you can see that when we click on the button there is a ripple effect animation, if you don't like that effect you can add the disableRipple attribute to the button element so on this third button which is for warn I'm going to add disableRipple attribute.

<button mat-raised-button color="primary">Primary Button</button>
<button mat-raised-button color="accent">Accent Button</button>
<button mat-raised-button color="warn" disableRipple>Warn Button</button>

If you save the file and go back to the browser only on this button when we click you can see that there is no more ripple effect. Now those were a lot of attributes to keep in mind so let me point you to the documentation examples where you'll found all required code to experiment with material buttons and you visit the [API tab](https://ma