How to implement Angular material card in Angular 12 | 13 .? - Edupala (2023)

We will make a series of tutorials on Angular material components and in the article, we will explore how to implement Angular material cards.

The angular material card is a flexible and extensible content container. It has optional to include headers and footers, and we can add a wide variety of content.

Angular Materials provide the developer with reusable UI components that help the developer to use ready-made components, fast development, and one best UI design.

The card is a flexible and extensible content container. We can easily configure a card by adding an optional subcomponent like ion-card-content, ion-card-header, ion-card-title, and ion-card-subtitle.

We have three objectives behind this tutorial, first will learn how to use Angular material card and second we’ll look how how to add image in material card. Last we will learn how to add background color and box shadown on Angular material card.

(Video) Angular 13 Facebook Login SDK Project to Display User Profile Using angularx-social-login Library

Step 1: Setting up and configuring Angular material card project

Let’s first create our Angular material card project. In our previous articles, we learned how to install and the best approach for configuringAngular material in our project.Run the following command to create and add Angular Material to our project.

ng new angularCardppcd angularMaterialCardAppng add @angular/material

While running the 3rd command will ask you the select theme, material typography, and animation, press yes on all. To use the Angular material component, we have to import it into our app module. Let create a module and import all material components on it.

ng g m ng-material
How to implement Angular material card in Angular 12 | 13 .? - Edupala (1)

Open src/app/ng-material/ng-material.module.ts and replace the existing code with the code shown below.

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MatCardModule } from '@angular/material/card';import { MatButtonModule } from '@angular/material/button';import { MatIconModule } from '@angular/material/icon';import { AppRoutingModule } from '../app-routing.module';@NgModule({ declarations: [], imports: [ CommonModule, MatCardModule, MatButtonModule, MatIconModule, AppRoutingModule, ], exports: [ CommonModule, MatCardModule, MatButtonModule, MatIconModule ]})export class NgMaterialModule { }

We are importing all the required modules in our custom material module file and keeping separate modules for Angular material will make the application easy to maintain. Now we need to import our material module and ReactiveFormModule in our src/app/app.module.ts file.

import { NgMaterialModule } from './ng-material/ng-material.module';@NgModule({...imports: [ ... ReactiveFormsModule, NgMaterialModule,],})

Step 2: Angular material card basic example

We have completed our configuration of material form, now let’s demonstrate the Angular material card basic example.

Here is a screenshot of our Angular material card basic example.

How to implement Angular material card in Angular 12 | 13 .? - Edupala (2)

Let’s add the Angular material card component in the app.component.html file.

<div class="container"> <mat-card class="example-card"> <mat-card-header> <mat-card-title> <h2>Angular material card header</h2> </mat-card-title> <mat-card-subtitle> <h4> Angular material subtitle</h4> </mat-card-subtitle> </mat-card-header> <mat-card-content> Material card content .. goes here you can add any paragraph, image, form and others </mat-card-content> <mat-card-actions align="end"> <button mat-stroked-button> Cancel </button> <button mat-stroked-button> Save</button> </mat-card-actions> <mat-card-footer> <h4>Mat card footer</h4> </mat-card-footer> </mat-card></div>

An angular material cards, can have sub optional components. In the above, we have used all Angular material card optional components. Let’s discuss and list all material card sub-component.

S.noCard subcomponent|Description
1mat-cardIs the root component for all the card content. All inside it are its child component.
2mat-card-headerHeader component of the material card. Here we can include mat-card-title and mat-card-subtitle as a subcomponent of it.
3mat-card-titleAngular card titles for the material cards.
4mat-card-subtitleCard section subtitles, both title and subtitle are optional.
5mat-card-contentCard body content, Here we add text and any other HTML element
6mat-card-actionsHere we can add buttons, like to share or to invoke some methods.
7mat-card-footerIs optional is the last bottom section of the material card.

Angular Material card with an image

An Angular material card component can contain text, a list, a video, and images. In the example below, we will demonstrate how to add an image of an avatar in the header and material content.

Here is a screenshot of the Angular material card with an image.

How to implement Angular material card in Angular 12 | 13 .? - Edupala (3)

To add an image on an avatar in the header and content, let’s edit our component template. Here we used the mat-card-avatar directive in the material header component and applied the image via CSS class.

<mat-card class="image-card"> <mat-card-header> <div mat-card-avatar class="header-image-avatar"></div> <mat-card-title>Angular Material</mat-card-title> <mat-card-subtitle>Card component</mat-card-subtitle> </mat-card-header> <mat-card-content> <p> <img mat-card-image src="../assets/images/material-image.png" alt="Angular material Card"> Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification developed by Google in 2014. </mat-card-content> </mat-card>

mat-card-avatar: This is an Angular material directive, used to add an avatar image to our card header.

In our style component file let’s add an image for our mat-card-avatar. edit component scss file.

div.container { margin: 20px; .image-card { max-width: 450px; } .header-image-avatar { background-image: url('../assets/images/material-logo.png'); background-size: cover; }}

How to apply Angular material card background color to header and footer ?

In the previous example, we demonstrated how to add images in the div header and content. In this example, we will learn how to add background color to the Angular material cards. We can apply color through CSS style.

How to implement Angular material card in Angular 12 | 13 .? - Edupala (4)

We have also applied Angular material shadow color using mat-elevation- class on the mat-card tag. The value of mat-elevation-24 can range from 0 to 24.

 <mat-card class="basic-card mat-elevation-z24"> <mat-card-header> <mat-card-title> <h2>Angular material card header</h2> </mat-card-title> <mat-card-subtitle> <h4> Angular material subtitle</h4> </mat-card-subtitle> </mat-card-header> <mat-card-content> Material card content .. goes here you can add any paragraph, image, form and others </mat-card-content> <mat-card-footer> <h4>Mat card footer</h4> </mat-card-footer> </mat-card>

We have to apply background color in component style as.

div.container { margin: 50px; mat-card.basic-card { background-color: blue; max-width: 550px; margin:0; padding:0 !important; mat-card-header { background: yellow; padding: 5px !important; margin-top: -20px !important; } mat-card-content { background: blue; padding:15px !important; } mat-card-actions { padding:20px; float: right; } mat-card-footer { background: red; margin:0; padding: 20px; } }}

How to apply Angular material card shadow

We have learned that we can add Angular material card shadow using mat-elevation- class and we have demonstrated in the above example. We can also use CSS shadow properties to add shadow to Angular material.

How to implement Angular material card in Angular 12 | 13 .? - Edupala (5)
 <mat-card class="image-card"> <mat-card-header> <div mat-card-avatar class="header-image-avatar"></div> <mat-card-title>Angular Material</mat-card-title> <mat-card-subtitle>Card component</mat-card-subtitle> </mat-card-header> <mat-card-content> <p> <img mat-card-image src="../assets/images/material-image.png" alt="Angular material Card"> Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification developed by Google in 2014. </mat-card-content> <mat-card-actions> <button mat-raised-button color="primary">LIKE</button> <button mat-flat-button color="accent">SHARE</button> <button mat-stroked-button color="warn">Primary</button> </mat-card-actions> </mat-card>

In our component style let’s add shadow value for our card.

mat-card:not([class*=mat-elevation-z]) { box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;}

Angular material card list example

We can loop through the angular material card list, we can use swiperjs or any other third library to make sliding cards with images. Here we demonstrate a simple example to loop through a card list.

How to implement Angular material card in Angular 12 | 13 .? - Edupala (6)

Let’s first create a list item in our component typescript as below.

export class AppComponent { items = { header: 'Ionic', content: 'Ionic empowers web developers to build leading cross-platform mobile apps and Progressive Web Apps (PWAs).' }, { header: 'Angular ', content: 'Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals.' }, { header: 'Reactjs', content: 'React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.' }, ];}

Check articles on the best and latest 2022, and 2021 Angular books to read for your journey from beginner to advanced level.BEST BOOK ON ANGULAR 2022 – 2021

In our component template let loop and add a list of angular material cards.

<div class="container"> <mat-card *ngFor="let item of items"> <mat-card-header> <mat-card-title> <h2>{{ item.header }}</h2> </mat-card-title> </mat-card-header> <mat-card-content> {{ item.content }} </mat-card-content> </mat-card></div>

Conclusion
We have completed our Angular material card example and demonstrated a few examples of how to add images and shadows. I hope you have got some idea of how to use the Angular material cards.

Related Articles

Spread the love

FAQs

Can Angularjs use angular materials with 12? ›

we will create new angular 12 project using ng new command and then after we will install material design using ng add command. After that we will create very simple input form example with button. So let's see bellow few step to install material design in angular 12 application.

How do you implement angular material Datepicker? ›

To implement date picker in Angular we can use angular material datepicker module called MatDatepickerModule .
...
Now we will implement a basic date picker in angular using mat-datepicker element.
  1. Add a template reference variable mat-datepicker element.
  2. Connect mat-datepicker to input element via [matDatepicker] property.

How do you use angular materials in angular 14? ›

Follow the following steps to install and use material theme in angular 14:
  1. Step 1 – Create New Angular App.
  2. Step 2 – Install Material Design.
  3. Step 3 – Import CSS.
  4. Step 4 – Import Material Design Libraries.
  5. Step 5 – Run Angular App.
17 Jun 2022

Where do I put angular materials? ›

Visit https://cli.angular.io/ to get the reference of the command. Type npm install -g @angular/cli to install Angular CLI on your system. Angular CLI provides the interface as shown above. We can also use IDE such as, WebStorm, Atom, Visual Studio Code, etc.

What is the latest version of angular material? ›

Angular Material
  • Version. Downloads (Last 7 Days) Tag.
  • 13.3.9. 165,929. v13-lts.
  • 12.2.13. 135,035. v12-lts.
  • 11.2.13. 74,560. v11-lts.
  • 14.2.3. 27,426. latest.
  • 15.0.0-next.3. 237. next.
5 days ago

Why datepicker is not working in angular? ›

The problem is that the DOM template of the Component is not ready when you call the datepicker in the Component and so jquery can't bind the events to the DOM element. Try to use a timeout in your component. Note ` is missing before and after the template text.

How do I use NgbDatepicker? ›

#Add Datepicker Bootstrap Component in Application

In the component class, import NgbDatepicker , NgbCalendar and NgbDateStruct to use their methods to set, get or format Datepicker value. The ngbDatepicker is used as an attribute in an Input control with an icon button to toggle Datepicker popup.

What is date picker in angular? ›

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components, directives and the date implementation module that work together.

How do you import materials? ›

The following documents are necessary for importing raw material to India.
  1. IEC Registration.
  2. Import Licence, if necessary.
  3. Industrial Licence, if necessary.
  4. Commercial Invoice.
  5. Purchase order / Letter of Credit.
  6. Bill of Lading / Airway Bill / Road Transport Receipt.
  7. Insurance Certificate.
  8. Bill of Entry.
6 Mar 2018

How do you use material designs in angular 13? ›

Importing a material theme

You have the option of using a custom or pre-built theme. Themes are stylesheets (CSS files). Check out the @angular/material/prebuilt-themes directory in the node_modules folder of your angular 13 project to see all of the available pre-built themes: deeppurple-amber.

How do you check angular material is installed or not? ›

Looks like you can use npm ls @angular/material to tell you the exact version. Show activity on this post. which will display something like that: { "name": "angular-material", "version": "0.11.

What is material UI in angular? ›

Angular Material is a User Interface (UI) component library that developers can use in their Angular projects to speed up the development of elegant and consistent user interfaces. Angular Material offers you reusable and beautiful UI components like Cards, Inputs, Data Tables, Datepickers, and much more.

How do I install MatSnackBar? ›

Approach:
  1. First, install the angular material using the above-mentioned command.
  2. After completing the installation, Import 'MatSnackBarModule' from '@angular/material/snack-bar' in the app. ...
  3. First we need to create an instance for 'MatSnackBar'. ...
  4. Using this instance we get access to open() function which is in-built.
23 Feb 2021

What is the difference between bootstrap and angular material? ›

Bootstrap is a responsive framework that can develop user-friendly and modern websites and mobile applications. Angular Material is a User Interface (UI) component library that offers reusable components to speed up your project.

How do I add angular materials to Stackblitz? ›

Contents
  1. 1: Create your Angular project with Angular CLI.
  2. 2: npm install @angular-material and hammerjs. ...
  3. 3: Configure angular.json and hammerjs.
  4. 4: Include a theme and Material Icons. ...
  5. 5: Configure app.module.
  6. 6: Using Material Components. ...
  7. Tip: Angular Material VSCode Extension.
  8. Source code + live demo + Stackblitz.
30 Jul 2017

Is angular material responsive? ›

It is specially designed for AngularJS developers. It helps to design the application in a structured manner. Its components help to construct attractive, consistent, and functional web pages and web applications. It is used to create a responsive and faster website.

Can we use material UI in Angular? ›

It integrates easily with Angular Projects because it is built with Angular structure. It can be incorporated with new or existing Angular Application despite the version. It provides tools for developers to build/customize their components. It speeds up the development process of building UI components from scratch.

How do I downgrade Angular materials version? ›

“how to downgrade angular version” Code Answer
  1. Try like this :
  2. ng --version.
  3. npm uninstall -g @angular/cli.
  4. npm cache clean --force.
  5. npm install -g @angular/cli@7.2.
  6. ng --version.
21 Apr 2020

Is Angular material free? ›

Angular Material is under MIT license so it's free and can be used for commercial use. Provide modern web design principles such as portability, device independence, and attractive application.

Can I use angular material with AngularJS? ›

The AngularJS Material library is a mature and stable product that is ready for production use. Developers should note that AngularJS Material works only with AngularJS 1.

How many $rootScope an AngularJS application can have? ›

All the $scopes of an AngularJS application are children of the $rootscope. An app can have only one $rootScope.

Which of the following is not a valid AngularJS filter? ›

Which of the below is an Invalid filter in AngularJs? Explanation: The filter in angular is provide transformation of the data Email is an invalid filter in Angular JS the valid filter are JSON, limitTo, and order by.

Do AngularJS provide reusable components? ›

5) Do AngularJS provide reusable components? Answer: A is the correct option. AngularJS provides reusable components. 6) Which of the following directive is used to bind the application data to the HTML view in AngularJS?

Can we use material UI in Angular? ›

It integrates easily with Angular Projects because it is built with Angular structure. It can be incorporated with new or existing Angular Application despite the version. It provides tools for developers to build/customize their components. It speeds up the development process of building UI components from scratch.

How do you check Angular material is installed or not? ›

Looks like you can use npm ls @angular/material to tell you the exact version. Show activity on this post. which will display something like that: { "name": "angular-material", "version": "0.11.

What is the difference between $scope and $rootScope? ›

The main difference is the availability of the property assigned with the object. A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.

What is alternative of rootScope in Angular? ›

In similar way, you can use use the sharedService inside any component & fetch the returing output and used inside your view. That's it. I found this solution as a good alternative of rootScope. You can use this inside your angular 2/4 application.

What is rootScope apply ()? ›

$scope.$apply() This function is used to execute an expression in Agular. The function expression is optional and you can directly use $apply(). This is used to run watcher for the entire scope. $rootScope.$digest()

What are the different types of filters in angular? ›

AngularJS Filters
  • currency Format a number to a currency format.
  • date Format a date to a specified format.
  • filter Select a subset of items from an array.
  • json Format an object to a JSON string.
  • limitTo Limits an array/string, into a specified number of elements/characters.
  • lowercase Format a string to lower case.

Who is called as father of AngularJS? ›

AngularJS was originally developed in 2009 by Miško Hevery at Brat Tech LLC as the software behind an online JSON storage service, that would have been priced by the megabyte, for easy-to-make applications for the enterprise.

How do you share data between controller and view? ›

The other way of passing the data from Controller to View can be by passing an object of the model class to the View. Erase the code of ViewData and pass the object of model class in return view. Import the binding object of model class at the top of Index View and access the properties by @Model.

How do you call a component in AngularJS? ›

A few different ways: Pass an object as an attribute with two-way binding ( scope:{myattr:'='} ) to the task-item-header directive which the directive could then add a function to for the parent controller to call. Set an attribute that has either one-way binding ( scope:{myattr:'@'} ) on it and then attrs.

What is the difference between Ng if and ng show ng hide? ›

ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.

How do I pass data from one component to another in AngularJS? ›

Methods to Share Data Between Angular Components
  1. Goals. Data Sharing Between Angular Components. ...
  2. Specifications. ...
  3. Method1: Parent to Child via @Input. ...
  4. Method 2: Child to Parent via @Output and EventEmitter. ...
  5. Method3: Child to Parent via @ViewChild. ...
  6. Method 4: Unrelated Components via a Service.
22 Jul 2022

Top Articles
Latest Posts
Article information

Author: Golda Nolan II

Last Updated: 12/21/2022

Views: 6298

Rating: 4.8 / 5 (78 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Golda Nolan II

Birthday: 1998-05-14

Address: Suite 369 9754 Roberts Pines, West Benitaburgh, NM 69180-7958

Phone: +522993866487

Job: Sales Executive

Hobby: Worldbuilding, Shopping, Quilting, Cooking, Homebrewing, Leather crafting, Pet

Introduction: My name is Golda Nolan II, I am a thoughtful, clever, cute, jolly, brave, powerful, splendid person who loves writing and wants to share my knowledge and understanding with you.