How to get started easily with Angular 7 Card?

A quick start project that helps you to create an Angular 7 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.

• Angular 7+
• TypeScript 2.6+

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 7 project creation steps using the Angular CLI tool.

1. Install the Angular CLI application in your machine.

   npm install -g @angular/cli@7.0.5
   

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>

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

   ng new <project name>
   cd <project name>
   

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

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

Adding Angular 7 Card

You can add the Angular 7 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 7 Card.