We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Card?

Platform: Angular - EJ 2 |
Control: Card
Tags: card, angular-11

A quick start project that helps you to create an Angular 11 Card with minimal code configuration.



Project pre-requisites


Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.



The Card is pure CSS component so no other package dependencies are needed to render the Card. The Card CSS files are available in the Syncfusion `ej2-angular-layouts` package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project


We will see the Angular 11 project creation steps using the Angular CLI tool.

  1. Install the Angular CLI application in your machine.


npm install -g @angular/cli@11.2.3



If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number.


npm install -g @angular/cli@<CLI VERSION>


  1. Now create a new Angular project by using the command `ng new` and navigate to that folder.
    ng new angular11-app
    cd angular11-app


  1. Install the ej2-angular-layouts package through the npm install command.


npm install @syncfusion/ej2-angular-layouts --save


Adding Angular 11 Card


You can add the Angular 11 Card component by using class `e-card` in the `div` element.

  1. Define the Angular Card code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file.




<div tabindex="0" class="e-card" id="basic">

  <div class="e-card-header">

    <div class="e-card-header-caption">

      <div class="e-card-title">Advanced UWP</div>



  <div class="e-card-content">

    Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series

    author Matteo Pagani. To download the complete white paper, and other papers in the series, visit

    the White Paper section of Syncfusion’s Technology Resource Portal.




  1. The CSS files are available in `../node_modules/@syncfusion` package folder. This can be referenced in [src/styles.css] using following code.




@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';


  1. You can also refer the CDN link of CSS reference within the index.html.




<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />


  1. Try running the application with the command ng serve, and see the Card with it’s content displayed on the browser.


There are more options to explore with Angular 11 Card.



2X faster development

The ultimate Angular UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile