Angular 2 Animation

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

@Component({
  selector: 'my-app',
  template: `
    <div id="fab" (click)="handleClick()">
      <div id="icon">
      +
      </div>
    </div>
    
    <toggle [shouldToggle]="toggle">Hello</toggle>

  `,
  styles: [`
    #fab {
      background-color:green;
      height:50px;
      width:50px;
      border:none;
      border-radius:50%;
      box-shadow:0 0 7px rgba(0,0,0,.7);
      position:absolute;
      bottom:0px;
      right:0px;
      margin:20px;
      cursor:pointer;
    }
    
    #icon {
      font-size:30px;
      color:white;
      line-height:48px;
      text-align:center;
    }
  `]
})
export class AppComponent{
    toggle = false;
    handleClick(){
        this.toggle = !this.toggle
    }
}


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ToggleComponent } from './toggle/toggle.component';

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


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Animation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="https://cdn.rawgit.com/angular/angular.io/74ef87f/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    
  </head>

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


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

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

@Component({
    selector: 'toggle',
    template: `
    <div class="modal" [@toggleState]="shouldToggle">
		    <ng-content></ng-content>
		</div>
    `,
    styles: [
      `
      .modal {
        background-color:#ffffff;
        border:1px solid lightgray;
        box-shadow:0 0 7px rgba(0,0,0,.2);
        width:40%;
        text-align:center;
        padding:30px;
        border-radius:6px;
        font-family:Roboto, helvetica, arial, sans-serif;
        font-weight:400;
        margin:40px auto;
        overflow-y: hidden;
      }
      `
      ],
    animations: [
    trigger('toggleState', [
      state('true' , style({  })),
      state('false', style({ maxHeight: 0, padding: 0, display: 'none' })),
      transition('* => *', animate('300ms')),
    ])
  ],
})
export class ToggleComponent {
    @Input() shouldToggle = false;
}