ng-materal provides a bunch of button variants. Each button type is an HTML button that offers identical functionality, but with slightly different designs and colors. Here is an example of two buttons:
2<button mat-stroked-button>My Button 2</button>
If you drill into the button class, you'll see that all the button variants are implemented in the same code base, as directives.
I was doing a code review on a current project and saw that the code was conditionally determining which button type to display:
2<button mat-stroked-button *ngIf="!condition">My Button 1</button>
I was bugged by the fact that we were implementing two button components in our code for what was essentially a style change. That's when I started digging into the specific implementation and discovered that the primary difference between a mat-flat-button and a mat-stroked-button was style changes.
I proposed this alternate approach:
We use the ngClass directive to conditionally flip the style between the flat-button and the stroked-button. It solved our issue with less code.
posted by Jeffry Houser in
ng material, Professional, Angular
| 0 Comments
