MMK - Plunker

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Polyfill for Web Animations -->
    <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <style>
      .box {
        background: green;
        border: 1px solid #333;
        padding: 1em;
        margin: 1em;
      }
    </style>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

import { platformBrowserDynamic }    from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { 
    Component, OnChanges, Input, 
    trigger, state, animate, transition, style 
} from '@angular/core';

@Component({
  selector : 'ease-inout',
  animations: [
    trigger('boxScale',[
    state('true', style({
        transform: 'scale(1.2)',
      })),
    state('false', style({
    transform: 'scale(1)',
  })), 
  transition('false => true', animate('100ms ease-in')),
    transition('true => false', animate('100ms ease-out')),
  ])
  ],
  template: `
  
    <div class="boxes">
      <div class="box" [@boxScale]="animate1">Box_1</div>
      <div class="box" [@boxScale]="animate2">Box_2</div>
    <div *ngFor="let box of boxes; let i = index; " class="box" id="{{i+1}}" [@boxScale]="box">Box{{i+1}}</div>
    <div>@MMK Stackoverflow</div>
</div>
  `
})
export class EaseInOutComponent implements OnChanges {
  boxes: boolean[] = [];
  animate1:boolean = true;
  animate2:boolean = false;
  
  constructor()
  {
    // just for example you can insert simple true or false
    this.boxes.push(this.animate1);
    this.boxes.push(this.animate2);
    console.log(this.boxes) //[true, false]
  }
  
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { EaseInOutComponent } from './easeinout.component';

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

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ease-inout>
    </ease-inout>
  `
})
export class AppComponent {

}

(function(global) {

  var ngVer = '@2.0.0'; 
  var formsVer = '@2.0.0'; 
  var  map = {
    'app':                        'app',

    '@angular':                   'https://unpkg.com/@angular', 
    'rxjs':                       'https://unpkg.com/rxjs@5.0.0-beta.6',
    'ts':                         'https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript':                 'https://unpkg.com/typescript@2.0.0/lib/typescript.js',
 };
  var packages = {
    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' }
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'upgrade'
  ];

  ngPackageNames.forEach(function(pkgName) {
    map['@angular/'+pkgName] = 'https://unpkg.com/@angular/' + pkgName + ngVer;
  });


  ngPackageNames.forEach(function(pkgName) {


    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

  });

  var config = {

    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    map: map,
    packages: packages
  };

  System.config(config);

})(this);

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}