Angular Material Buttons

• Angular material buttons are native buttons enhanced with native design.
• Examples : https://material.angular.io/components/button/examples

material.module.ts (a new module created)

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

const MaterialComponent = [
  MatButtonModule,
];

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

app.module.ts

import { MatButtonModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

<div>
  <button mat-button>Click Me!</button>
  <button mat-raised-button>Click Me!</button>
  <button mat-flat-button>Click Me!</button>
  <button mat-stroked-button>Click Me!</button> <!-- Outlined -->
</div>

<div>
  <button mat-icon-button>Icon</button>
  <button mat-fab>Fab</button>
  <button mat-mini-fab>Mini Fab</button>
</div>

<div>
  <button color="primary" mat-button>Icon</button>
  <button color="accent" mat-button>Fab</button>
  <button color="warn" mat-button>Mini Fab</button>
  <button color="primary" mat-raised-button>Icon</button>
  <button color="accent" mat-raised-button>Fab</button>
  <button color="warn" mat-raised-button>Mini Fab</button>
</div>

<!-- disable the ripple -->
<div>
  <button mat-raised-button disableRipple color="primary">Ripple Animation Disabled</button>
</div>

app.component.css

button{
  margin-right: 3rem;
}