1,640 Views

Let’s Make Animated Flash Card Component in Ionic 2

This is what we are going to make in today’s tutorial
io6-flash-card.gif

The final code of this tutorial can be found at the following repository
https://github.com/lohanitech/IonFlashcard

A flash card component is useful for showing information at two sides. It may as well be used to show the details of displayed item in the back side. So let’s get started.

Before you begin.

To get on with this tutorial you need to know the basics of Ionic 2. If you are new to Ionic 2 please make sure to go through our Getting Started With Ionic 2 tutorial.

Let’s begin our flash card development by creating a new project. In the terminal run ionic start IonFlashcard blank --v2
This will create a new project using blank starter template provided by Ionic folks.

Now create a flash card component using the command ionic g component flash-card
Then preview our app in the browser using the command ionic serve. If everything is done right, you should now be albe to preview your app. If you are having trouble please follow our Getting Started With Ionic 2 tutorial.

Let’s open the project in your favourite text editor, I’m using Visual Studio Code. And begin editing.

Open ‘src/app/app.module.ts’ file and import our newly generated component and also pass it to the declarations array.
Your ‘app.module.ts’ should look as follows

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { FlashCardComponent } from '../components/flash-card/flash-card';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    FlashCardComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Open ‘src/pages/home/home.html’ and inside remove everything and add <flash-card></flash-card>
If you have served your project using ionic serve command then your browser should reload and you should see ‘Hello World’ in the output. If you inspect the element, you should find component in the DOM hierarchy.

Now let’s make our actual flash-card component.
Open ‘src/components/flash-card/flash-card.html’ and update with following code

<ion-card class="fc-container" (click)="toggle()" [class.fc-back]="toggled" #fcContainer>
    <div class="front" #front>
        <ng-content class="" select=".fc-front"></ng-content>
    </div>
    <div class="back" #back>
        <ng-content select=".fc-back"></ng-content>
    </div>
</ion-card>

Here, we are using Ion-card as the base container for our flash card component.
The front side of the card is selected using the css class fc-front inside our flash card component and back side is selected using css class fc-back. So let’s add content to our flash card in home page.
Open ‘src/pages/home/home.html’ and update the code inside tag as follows

<flash-card>
    <div class="fc-front">
        <p>This is the front of the flashcard</p>
    </div>
    <div class="fc-back">
      <p>This is the back of the flashcard</p>
    </div>
  </flash-card>

Your reloaded browser should look like the following screenshot
io6-1

Let’s us style our flashcard component and add css flip animation.
Open ‘src/components/flash-card/flash-card.scss’ and update with the following code

flash-card {
    &{
        perspective: 1000px;
    }
    .fc-container{
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
        &.fc-back {
            transform: rotateY(180deg);
        }

        .front {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            z-index: 2;
            backface-visibility: hidden;
            padding: 20px;
            background: #f2f2f2;
            transform: rotateY(0deg);
        }

        .back {
            width: 100%;
            position: absolute;
            top:0;
            left:0;
            background: #f2f2f2;
            padding: 20px;
            transform: rotateY(180deg);
        }

    }
    .fc-back {
        .front {
            z-index: 0;
        }
        .back {
            z-index: 2;
        }

    }

}

This should style our flashcard and we should see the following screen
io6-2.png

But clicking the flash card won’t do anything. It will not play our animation yet. To make it work we should toggle the class fc-back on our container.
To do that let’s update our flash-card.ts file.
Open ‘src/components/flash-card/flash-card.ts’ and update with the following code

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'flash-card',
  templateUrl: 'flash-card.html'
})
export class FlashCardComponent {
  @ViewChild('fcContainer') fcContainer;
  @ViewChild('front') fcFront;
  @ViewChild('back') fcBack;
   toggled: boolean = false;

  constructor(private flashCard: ElementRef) {
  }
  ngAfterViewChecked(){
    //equalizing the height of child divs with the largest div
    let frontH = this.fcFront.nativeElement.querySelector('.fc-front').offsetHeight + 40;
    let backH = this.fcBack.nativeElement.querySelector('.fc-back').offsetHeight + 40;
    let h = ((frontH > backH)? frontH:backH) + 'px';
    this.fcContainer.nativeElement.style.height = h;
    this.fcBack.nativeElement.style.height = h;
    this.fcFront.nativeElement.style.height = h;
  }
  toggle() {
    this.toggled = !this.toggled;
  }

}

Our flashcard component is now ready.
If you click the component it should flip and you should be able to see the contents of the back side. You can place anything inside front and back div in your flash card. The sizing of flash card will be automatically increased to accomodate the largest component.

Thank you for reading through the tutorial. Please provide with comments to let us know how do you think or if you have any problems.

Related Posts

This post is trending.

Beautiful Timeline Component in Ionic 3

In this tutorial we will be building a beautiful timeline component to display any suitable content from blog posts to comments or […]

%d bloggers like this: