Angular Material Cards
In this lecture we'll talk about another layout component which is Cards, a card is a container for content and actions about a single topic.
So as always we need to import the module in material.module.ts
and add it to the MaterialComponents[]
array.
import { MatCardModule } from '@angular/material';
MaterialComponents = [
MatCardModule
]
Now we can create a basic card in the HTML the component is mat-card
.
<mat-card>
basic card
</mat-card>
If you take a look at the browser you should be able to see a basic card.
Angular material provides a few predefined sections that can be used inside this mat-card
component let's take look at them, at the top we usually have a card title so we're gonna add mat-card-title
component, after that we have the text content displayed using the mat-card-content
component and finally at the bottom we have a section for user actions for example button clicks the component is mat-card-actions
component.
<mat-card>
<mat-card-title>
Card Title
</mat-card-title>
<mat-card-content>
This is the Card content
</mat-card-content>
<mat-card-actions>
<button mat-flat-button>See More</button>
</mat-card-actions>
</mat-card>
Now as you can see at the browser we have the title, the content and the actions section if you want the button right aligned you can do so using the
align
attribute on the mat-card-actions
component.
<mat-card-actions aligned="end">
....
</mat-card-actions>
This is the basic idea behind cards in angular material there are a couple more sections with which you can truly build any card layout that you wish to so let me point you to the documentation where you can found a full-fledged application of a card.
You can also build your own cards for a registration form a login form, pricing section user profiles and a lot more, one component to fulfill a variety of requirements.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling