Simple plug-and-play flip animation component for Angular 6+ app.
Must Read: [CSS3] Responsive jQuery Coverflow Touch Slider Plugin | flipster
Simple Plug And Play Flip Component
Post Name | Flip Card Javascript Angular |
Author Name | ritsrivastava01 |
Category | Angular, Animation Plugins, TypeScript |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | March 19, 2022 |
Last Update | July 27, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Install
npm install ngx-flip --save
1. Import the Flip Module in your app.module.ts file
import { FlipModule } from 'ngx-flip'; // other imports @NgModule({ imports: [ // other imports FlipModule ], // ... }) export class AppModule {}
2. Add selector in template file my-component.html
<ngx-flip [flip]="flipDiv" (click)="onClick()"> <div front>Front</div> <div back>Back</div> </ngx-flip> Where flip : boolean variable => used to flip the front and back div <div front>Front</div> => Front div -- add 'front' as attribute to identify as front div <div back>Back</div> => Back div -- add 'back' as attribute to identify as back div
import { Component } from '@angular/core'; @Component({ /* ... */ }) export class MyComponent { flipDiv = false; onClick() { this.flipDiv = !this.flipDiv; } }
See Demo And Download

Official Website(ritsrivastava01): Click Here
This superior jQuery/javascript plugin is developed by ritsrivastava01. For extra Advanced Usages, please go to the official website.