# jp-ng-flash-cards

> NG FLASH CARDS is used to display card with front and back view.

Latest version **0.0.1** (published 2019-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install jp-ng-flash-cards
pnpm add jp-ng-flash-cards
yarn add jp-ng-flash-cards
bun add jp-ng-flash-cards
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-02-20 |
| First published | 2019-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 64.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | JeyamPrakash |
| Maintainers | jeyamprakash |
| Keywords | Cards, Flash Cards, ng Flash Cards, flip cards, Rotation view, Rotation Cards |

## Links

- npm: https://www.npmjs.com/package/jp-ng-flash-cards
- npm.io page: https://npm.io/package/jp-ng-flash-cards

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.1 (latest) — 2019-02-20

## README

## DESCRIPTION
Angular 6+ **Flash Card**. You can show a card with image and content, when click on the card it will rotate and show another card with diffrent content.

## INSTALLATION

```sh
npm install jp-ng-flash-cards
```

## How to use angular flash card in your angular app


## Sample Code for Angular Flash cards

### app.module.ts - Import the JpNgFlashCardsModule in your module  

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {JpNgFlashCardsModule} from 'jp-ng-flash-cards'; // import jp-ng-flash-cards


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

```


### app.component.ts - Import the JpNgFlashCardsModule in your component

```typescript
import { Component } from '@angular/core';
import {JpNgFlashCardsModule} from 'jp-ng-flash-cards'; // import it to your component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 public flashcardData: any;

  constructor() { // initiate it in your component constructor
    this.flashcardData = [
    {      
      front: { image:'https://raw.githubusercontent.com/dart-lang/logos/master/logos_and_wordmarks/angulardart-logo.png', title: 'Namaste', subtitle: 'Vanakam' },
      back: {
        title: 'meaning',
        subtitle: 'Hello, Greetings, I bless the divine in you',
        content: 'It is used to greet people every time they meet. It is usually initiated by the juniors'
      }
    },
    {
      front: {image: 'https://picsum.photos/200/300?image=0',
        title: '(Tapailai) Kasto chha?',
        subtitle: 'Eppadi Irukirergal ?'
      },
      back: {
        title: 'meaning',
        subtitle: 'How are you?',
        content: 'It is used to ask people how they are doing or feeling.'
      }
    }
    ]   
  }
}

```

### app.component.html - Include the  JpNgFlashCard library in your html component

```HTML
<lib-jp-ng-flash-cards [flashCards]="flashcardData"></lib-jp-ng-flash-cards>

```
In the above example, I have used two cards for flash card. You can use multiple flash cards. Front side contain image, title, subtitle. Back side of the flash card contains title, subtitle, content.

You have to use the library in your html component and feed the [flashcard] value in array of objects  format to load the flash card. You an feed single card or multiple card in array

## VERSION

0.0.1 - Angular 6 Flash cards

---
_Source: https://npm.io/package/jp-ng-flash-cards · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._