angular - How to implement a flip effect using Anuglar 2 animations? -

i have been using pure css flip of cards in project solution not proper one. can present flip in angular 2 on click of button? have found 1 in angularjs https://codepen.io/zbeyer/pen/oxqrzg

    <div ng-app="cardflipper" ng-controller="appcontroller">         <h1>card flipping angularjs</h1>     <div class="flip-container">         <div class="flipper" ng-click="flipcard()" ng-class="{'fliptofront':iscardrevealed, 'fliptoback':!iscardrevealed}">             <div class="back" ng-class="{'face-hidden':hidebackface}">             </div>             <div class="front" ng-class="{'face-hidden':!hidebackface}">                 <h1>{{currentcard.title | uppercase}}</h1>                 <p ng-if="currentcard.icon">{{currentcard.icon}}</p>                 <br ng-if="currentcard.icon" />                 <img ng-if="currentcard.imageurl" src="{{currentcard.imageurl}}" alt="currentcard.imagealt" />                 <p>{{currentcard.description}}</p>             </div>         </div>     </div>      <footer>         <div ng-if="currentcard && currentcard.source">             <a ng-href="{{currentcard.source}}" target="_blank">source</a>         </div>     </footer>     <br />     <br />   </div> <style>     /* card dimensions */ @width: 19em; @height: 27em; @shadow:1em 1em 2em #111111; /* mixins */ .box-shadow (@string:@shadow) {     -webkit-box-shadow: @string;     -moz-box-shadow:    @string;     box-shadow:         @string; }   .box-sizing(@sizing:border-box) {     -webkit-box-sizing: @sizing;     -moz-box-sizing: @sizing;     box-sizing: @sizing; }  .border-radius (@radius: 0.5em) {     -webkit-border-radius: @radius;     -moz-border-radius: @radius;     border-radius: @radius; }  .top-perspective() {         /*perspective*/     -webkit-perspective:1000;        -moz-perspective:1000;         -ms-perspective:1000;          -o-perspective:1000;             perspective:1000;   }   .flipped-transform-back () {     /*transform*/     -webkit-transform:rotatey(180deg);        -moz-transform:rotatey(180deg);         -ms-transform:rotatey(180deg);          -o-transform:rotatey(180deg);             transform:rotatey(180deg); }  .flipped-transform-front {      -webkit-transform: rotatey(0deg);         -moz-transform: rotatey(0deg);           -o-transform: rotatey(0deg);          -ms-transform: rotatey(0deg);              transform: rotatey(0deg); }  .flipper-transform(@transition: 0.4s) {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     -o-transform-style: preserve-3d;     -ms-transform-style: preserve-3d;     transform-style: preserve-3d;      -webkit-transition: @transition;     -moz-transition: @transition;     -o-transition: @transition;     -ms-transition: @transition;     transition: @transition; }  .back-face-should-be-hidden() {      -webkit-backface-visibility: hidden;     -moz-backface-visibility: hidden;     -ms-backface-visibility: hidden;     backface-visibility: hidden; }  /* style sheet */  body {     font-family: "myriad-pro", sans-serif;     font-size:100%;     text-align:center;      color:#d1d1d1;      padding: 0;     background-color:#333333;      margin:0 auto;     padding: 0; }  footer {     text-align:center;     padding:1em;     {         font-size:1em;         color:rgb(255, 208, 128);     } }   .flip-container {     display:block;     margin:0 auto;     width: @width * 1.0;     height: @height *1.0; }     .fliptofront {     .flipped-transform-front(); }  .fliptoback {     .flipped-transform-back(); }  /* flip speed goes here */ .flipper {     .top-perspective();     .flipper-transform();     width:100%;     height:100%;     position:relative; }  .flip-container, .front, .back {     .back-face-should-be-hidden();      text-align:center;     color:#333333;             padding: 0.25em;      h1, h2, h3, {         font-size: 1.25em;     } }  .face-hidden {      /*         .face-should-be-hidden();     */ }  .front, .back {     /* hide of pane during swap */     overflow:scroll;      display:inline-block;      /* card overlay eachother */     position: absolute;     top: 0;     left: 0;      /* make pretty */      .box-sizing();     .border-radius();         .box-shadow();     width:100%;     height:100%; }  /* front pane, placed above */ .front {     text-align:center;     z-index: 2;     background-color:#fefefe;     .flipped-transform-front ();         .box-sizing();      border:0.5em solid #fefefe;     img {         width:100%;         margin: 0 auto;         height:auto;         .border-radius();     } }  /* back, hidden pane */ .back {     background-color:#ebebeb;     .flipped-transform-back ();      background-image: url('http://subtlepatterns.com/patterns/upfeathers.png');     background-position: center;     background-repeat: repeat;     .box-sizing();      border:1em solid #fefefe;   }  /* media queries */  /* @highdensity: ~"only screen , (-webkit-min-device-pixel-ratio: 1.5)",               ~"only screen , (min--moz-device-pixel-ratio: 1.5)",               ~"only screen , (-o-min-device-pixel-ratio: 3/2)",               ~"only screen , (min-device-pixel-ratio: 1.5)"; */  @mobile:      ~"only screen , (max-width: 34em)"; @tablet:      ~"only screen , (min-width: 34em) , (max-width: 55em)"; @desktop:     ~"only screen , (min-width: 55em)";   @media @mobile {     h1, h2, h3 {         font-size: 1.25em;     }      .flip-container, .front, .back {         width: @width * 1.0;         height: @height *1.0;     } } /* @media @tablet {         .flip-container, .front, .back {         width: @width * 1.25;         height: @height *1.25;          h1, h2, h3 {             font-size: 1.75em;         }     } }  @media @desktop {     .flip-container, .front, .back {         width: @width * 1.5;         height: @height *1.5;      } }*/  <script>     angular.module('cardflipper', []) .controller('appcontroller', ['$scope', '$interval', function($scope, $interval) {      $scope.cards = [     {         title: "escheresque-dark",         icon:"",         imageurl:"http://subtlepatterns.com/patterns/escheresque_ste.png",         description:"sublte pattern source image below...",         source: "http://subtlepatterns.com/escheresque-dark/"     },     {         title: "dark sharp edges",         icon:"",         imageurl:"http://subtlepatterns.com/patterns/footer_lodyas.png",         description:"sublte pattern source image below...",         source: "http://subtlepatterns.com/dark-sharp-edges/"     },     {         title: "grey washed wall",         icon:"",         imageurl:"http://subtlepatterns.com/patterns/grey_wash_wall.png",         description:"sublte pattern source image below...",         source: "http://subtlepatterns.com/grey-washed-wall/"     } ];     $scope.currentcard = {};      $scope.iscardrevealed = false;     $scope.flipcard = function() {         $scope.iscardrevealed = !$scope.iscardrevealed;         if($scope.iscardrevealed) {             $scope.generatecard();         } else {              $scope.currentcard = {};             /*            settimeout(function() { //                $scope.isbackhidden = !$scope.iscardrevealed;             }, 0.1 * 1000); */                     }         /*            */     }      $scope.generatecard = function() {         $scope.currentcard = {};         var index = math.floor((math.random() * $scope.cards.length) + 0);          $scope.currentcard = $scope.cards[index];     }  }]); </script> 

can turn angular2 or implement different?

this demo using animation in angular

import { component, oninit, trigger, state, style, transition, animate } '@angular/core';  @component({   selector: 'app-root',   template: `     <div class="tp-wrapper">       <div class="tp-box" (click)="toggleflip()" [@flipstate]="flip">         <div class="tp-box__side tp-box__front">front         </div>         <div class="tp-box__side tp-box__back">back         </div>       </div>     </div>   `,   styles: [     `     .tp-wrapper {       perspective: 800px;     }      .tp-box {       position: relative;       width: 200px;       height: 100px;       margin: 3rem auto;       transform-style: preserve-3d;       transition: transform 1s;     }     .tp-box__side {       width: 100%;       height: 100%;       position: absolute;       backface-visibility: hidden;       color: #fff;       text-align: center;       line-height: 100px;       font-size: 24px;       font-weight: 700;       cursor: pointer;       user-select: none;     }     .tp-box__front {       background: #f30d36;     }     .tp-box__back {       background: #23262d;       transform: rotatey(179.9deg);     }      `   ],   animations: [     trigger('flipstate', [       state('active', style({         transform: 'rotatey(179.9deg)'       })),       state('inactive', style({         transform: 'rotatey(0)'       })),       transition('active => inactive', animate('500ms ease-out')),       transition('inactive => active', animate('500ms ease-in'))     ])     ] }) export class appcomponent {    flip: string = 'inactive';   constructor() {}    toggleflip() {     this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';   }  } 

online demo: https://plnkr.co/edit/rz1v9m?p=preview