How to make a Collapsible card with Angular and material design


Collapsible panes are useful when you want to show big amount of data in a container. In this example I developed a collapsible panel with Angular and material design.

To start you should know what data needs to be always visible and what needs to be visible after the panel collapses. So we need to separate our data into:

  1. Panel title
  2. Panel content

Because cards are more popular, I’m going to use a material design card instead of a simple panel. Here is a link to Material design cards.

So lets begin:

First thing we need to do is to get angular CLI to create a new application.

npm install -g @angular/cli

 

and then make a new Angular project :

 

ng new my-app

 

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. Now we need to go to the app directory and run the application:

 

cd my-app
ng serve –open

 

now you can see the app on your browser. It’s time to navigate to app.component.html file in src/app directory. And replace contents of the file with below code:

<mat-card class="example-card">

  <mat-card-header>

    <div mat-card-avatar class="example-header-image"></div>

    <mat-card-title>Card title</mat-card-title>

    <mat-card-subtitle>Card subtitle</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 *ngIf="!collapsed">

    <p>material design card <code class="docs-markdown-code">&lt;mat-card&gt;</code></p>

    <p><a href="https://material.angular.io/components/card/examples">Material design card </a></p>

     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  </mat-card-content>

  <mat-card-actions>

     <button mat-raised-button (click)="collapsed=true"  color="primary">Collapse card content </button>

     <button mat-raised-button (click)="collapsed=false" color="accent">Uncollapse card content</button>

  </mat-card-actions>

</mat-card>

 

Above code uses Material design card as panel. You can find more about it here.

Now we need to include material design to utilize Material design components. Use below command to install Material design package:

npm install --save @angular/material @angular/cdk

now we’re pretty close to finish the app. Just need to update app.module.ts file with below code:

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

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

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import {MatCardModule} from '@angular/material/card';

import {MatButtonModule} from '@angular/material/button';


@NgModule({

  imports:      [ BrowserModule, FormsModule, MatCardModule, MatButtonModule ],

  declarations: [ AppComponent],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

and finally update component’s CSS file:

.example-card {

    max-width: 400px;

  }

  .example-header-image {

    background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');

    background-size: cover;

  }

 

There you go, Collapsible card is ready for you. You can download the code from my repo here:

https://github.com/ramin-ahmadi/collapsiblecard

 

enjoy!

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

How to make a Collapsible card with Angular and material design

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format