Simple plug and play flip animation component for Angular 6+ app.
flip card javascript onclick, flip animation css, javascript flip image on click, flip background image css, css animation flip horizontal
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; } }
Simple plug and play Flip component Plugin/Github
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.