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

Note:

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 the corresponding angular version number.

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

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 the 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, visitthe 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 to the CDN link of the 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 its content displayed on the browser.

There are more options to explore with Angular 11 Card.