Foobar

Json-cards is an angular component library that displays a page of cards that are configurable from a JSON input. The cards are organized in the bootstrap grid system.

Installation

Use npm install json-cards to install

npm install json-cards

Usage

First, add the module to the imports of the module you want to you it in.

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

import { AppComponent } from "./app.component";
import { JsonCardsModule } from "json-cards";

@NgModule({
  declarations: [AppComponent],
  imports: [JsonCardsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then, the selector is usable in html in that module.

<div class="json-cards-wrapper">
  <lib-json-cards
    [configJson]="configJson"
    [jsonCardsWrapperClass]="myWrapperClass"
    [jsonCardsContainerClass]="myContainerClass"
  ></lib-json-cards>
</div>

Three things may be passed in, the required JSON that will display the cards and their contents, an optional class on the wrapper of the json-cards module, and a class for the container of the actual module itself.

Here is an example of a JSON used for configuration. The name is the name that will appear on the top of the card. The size is the bootstrap class that that card will receive. The selector is the selector of the element that should be used to fill the content of the card, for example, a web or angular element.

[
  {
    name: "Angular Element ElA responsive IFrame",
    size: "col-lg-12",
    selector: "<react-element-a></react-element-a>"
  },
  {
    name: "Resium Weather Map",
    size: "col-lg-6",
    selector: "<angular-element-a></angular-element-a>"
  },
  {
    name: "Another APP",
    size: "col-lg-6",
    selector: "<angular-element-b></angular-element-b>"
  },
  {
    name: "Element Four",
    size: "col-lg-4",
    selector: "<angular-element-b></angular-element-b>"
  },
  {
    name: "Element Five",
    size: "col-lg-4",
    selector: "<angular-element-a></angular-element-a>"
  },
  {
    name: "Element Six",
    size: "col-lg-4",
    selector: "<angular-element-b></angular-element-b>"
  },
  {
    name: "Element Seven",
    size: "col-lg-3",
    selector: "<angular-element-c></angular-element-c>"
  },
  {
    name: "Element Eight",
    size: "col-lg-5",
    selector: "<angular-element-b></angular-element-b>"
  },
  {
    name: "Element Nine",
    size: "col-lg-4",
    selector: "<angular-element-a></angular-element-a>"
  }
];

License

MIT