How to get started easily with Syncfusion Angular 11 Card?

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.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Dependencies

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

2. Now create a new Angular project by using the command `ng new` and navigate to that folder.

   ng new angular11-app
   
   cd angular11-app
   
   

3. 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.

[app.component.html]

<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>

  </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.

  </div>

</div>

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

[styles.css]

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

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

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

[index.html]

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

4. 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.