Angular Material- Buttons
Angular directing <mat-button> is used to create a button with content styling and animations. Angular content buttons are native <button> or elements enhanced with styling and ink ripples.
Native <button> and <a> elements are used to provide the accessible experience for users. The <button> element is used when any action is performed. An <a> element will be used when the user will navigate another view.
There are many button variants, each applied as an attribute:
Attribute | Description |
---|---|
mat-button | It is a rectangular text button with no elevation |
mat-raised-button | It is a rectangular contained button with elevation |
mat-flat-button | Mat-flat-button is a rectangular contained button with no elevation |
mat-stroked-button | It is also a Rectangular outlined button with no elevation |
mat-icon-button | mat-icon-button is a circular button with a transparent background, meant to contain an icon |
mat-fab | Mat-fab is a circular button default to the theme’s accent color |
mat-mini-fab | It is the same as mat-fab but smaller in size |
Theming
Buttons can also be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.
Capitalization
Button text has to be capitalized. However, we have opted not to automatically capitalize buttons by text-transform: uppercase because it causes certain locales issues.
Accessibility
Angular content uses the original <button> and <diagram> elements to ensure an accessible experience by default. The <button> element is used for any interaction that acts on the current page. The <a> element must be used for any interaction navigating to any other view.
Only buttons or links with icons (such as mat-fab, mat-mini-fab, and mat-icon-buttons) should be given a meaningful label via the area-label.
We should follow the steps given below to update the Angular application created in Angular content:
Step 1: Create a Project with the name Content App.
Step 2: Modify app.module.ts, app.component.ts, app.component.css, and app.component.html as given below. Keep the remaining files unchanged.
Step 3: Compile and run the application to validate the result of the logic that is applicable.
Let’s follow the steps and create different types of buttons.
app.component.html
app.module.ts
app.component.css
Output:
Let’s create another module to create buttons.
app.module.ts
app.component.css
app.component.html
Output: