AngularMaterial

Angular - Material - Button

Notes

  • Mat-button
  • Mat-raised button – this sometimes overlaps other controls, so a CSS fix is needed. I put these at the bottom of forms, with a mat-divider separating these from other controls.
  • Mat-stroked-button – looks like a button. has a ripple effect.

Sample Code

1
2
3
4
5
<button mat-stroked-button
  [routerLink]="['/policyTypeCode']"
  >
  Add PolicyTypeCode
</button>

When clicked this navigates to the /policyTypeCode page.

Another sample

1
2
3
4
5
6
7
8
<button 
  class="submit-btn" 
  color="primary" 
  mat-raised-button 
  type="submit" 
  (click)="savePolicyTypeCode()"
  >Submit
</button>

When clicked this calls the savePolicyTypeCode function.

1
2
3
4
5
6
<button mat-button color="primary" 
    (click)="markThis( trasaction, '0')"
    matTooltip="Move entry back to Unreconciled Transactions column"
    >
  <mat-icon>chevron_left</mat-icon>
</button>

Here’s a button with no text. But rather it has an icon. There’s also a tooltip.

Here’s a link to a page that shows the list of icons: https://fonts.google.com/icons

References