How to Create UI Cards in Angular with Angular Material 13

Angular material card tutorial; This guide will cover important aspects that will help you implement user interface Cards in Angular application using the Angular Material Cards UI component.

We will show you how to create cards with multiple sections pretty simply, how to create a list in cards and how to create a Grid in cards using the mat-card directive.

A card in UI design is used to showcase the user content strategically in a limited space. Ideally, in the card, we refrain from showing long texts and make the content a bit more scannable.

A card is a single element but contains various elements; however, a card fulfils a single subject. Generically, a card is an entry point for more meticulous information.

Angular Material 13 UI Cards Design Examples

  • Step 1: Build Angular Project
  • Step 2: Add Material Module
  • Step 3: Create Material Modules File
  • Step 4: Create Card with Multiple Sections
  • Step 5: Create Material Cards List
  • Step 6: Create Material Cards with Grid
  • Step 7: Run Development Server

Build Angular Project

Angular CLI is a handy command-line interface tool that allows you to create, scaffold, and manage Angular applications straight from the command line tool.

npm install -g @angular/cli

Angular CLI is up and running, you can now create a new angular application using the given command.

ng new ng-material-demo

Enter into the application folder and start building the app.

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Add Material Module

In this step, you will be installing material library, onto the terminal type and then execute the given command.

ng add @angular/material

Answer the given questions to set up the material fonts, theme and animation.

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Open the src/styles.scss file, add the material theme CSS link.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Create Material Modules File

Let’s create material.module.ts in the src/ folder, and start importing all the material modules.

If you want you can only import the single MatCardModule, this module is used specifically for user interface cards.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Incorporate the CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules in the app.module.ts file that you can find in app/ directory.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Create Card with Multiple Sections

The mat-card attribute is the primary wrapper that allows you to design the UI card profoundly, and it contains various sections that complete the layout of the UI card.

To create the card with multiple sections, you have to add the given code into the angular html template with the mat-card-header and mat-card-content sections.

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

Create Material Cards List

We will show you how to create the list in a card using the mat-card attribute, and we will use the various card section to build the card list.

Update the given code inapp.component.html file.

<div class="ui-card-container">
  <mat-card>
    <mat-card-header>
      <img
        src="https://remotestack.io/wp-content/themes/mudra/assets/img/logo-remotestack.svg"
        mat-card-avatar
      />
      <mat-card-title>RemoteStack</mat-card-title>
      <mat-card-subtitle>
        Angular Material Cards List Example
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        Aliquam pharetra imperdiet nibh id fringilla. Mauris fermentum quam sit
        amet arcu dignissim finibus.
      </p>

      <mat-list role="list">
        <mat-list-item role="listitem">Doctor Strange</mat-list-item>
        <mat-list-item role="listitem">She Hulk</mat-list-item>
        <mat-list-item role="listitem">Moon Knight</mat-list-item>
      </mat-list>
    </mat-card-content>

    <mat-card-actions>
      <button mat-raised-button color="accent">LIKE</button>
      <button mat-raised-button color="primary">SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

Create Material Cards with Grid

Create a grid interface in angular typescript Template, create a Grid object with cols, rows and color property.
in the app.component.ts file.

import { Component } from '@angular/core';

export interface Grid {
  color: string;
  cols: number;
  rows: number;
  text: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  GRID: Grid[] = [
    { text: '1', cols: 3, rows: 1, color: 'grey' },
    { text: '2', cols: 1, rows: 2, color: 'beige' },
    { text: '3', cols: 1, rows: 1, color: 'lightblue' },
    { text: '4', cols: 2, rows: 1, color: '#cddc39' },
  ];

  constructor() {}
}

The mat-grid-list directive will display the card grid layout in angular using the ngFor loop. Hence, add the following code in the app.component.html file.

<div class="ui-card-container">
  <mat-card>
    <mat-card-header>
      <img
        src="https://remotestack.io/wp-content/themes/mudra/assets/img/logo-remotestack.svg"
        mat-card-avatar
      />
      <mat-card-title>RemoteStack</mat-card-title>
      <mat-card-subtitle>
        Angular Material Cards Grid Example
      </mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        Aliquam pharetra imperdiet nibh id fringilla. Mauris fermentum quam sit
        amet arcu dignissim finibus.
      </p>

      <mat-grid-list cols="4" rowHeight="120px">
        <mat-grid-tile
          *ngFor="let grid of GRID"
          [style.background]="grid.color"
          [colspan]="grid.cols"
          [rowspan]="grid.rows"
        >
          {{ grid.text }}
        </mat-grid-tile>
      </mat-grid-list>
    </mat-card-content>

    <mat-card-actions>
      <button mat-raised-button color="accent">LIKE</button>
      <button mat-raised-button color="primary">SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

Run Development Server

Run the application’s development server using the given below command:

ng serve

Angular app is now ready to serve on the 4200 port, use the url to view the app:

http://localhost:4200

How to Create UI Cards in Angular with Angular Material 13

Conclusion

The card gives greater flexibility by providing intuitiveness for usability, it is great for aggregated content, accessible to scan and browser, and more importantly, it is pretty much shareable.

In this tutorial, we have learned how to integrate a UI design card in an angular app to showcase users’ information. We have explored how to use angular material cards component to design cards in an angular environment.