<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Animations</h1>
      <button class="btn btn-primary" (click)="onAnimate()">Animate!</button>
      <button class="btn btn-primary" (click)="onShrink()">Shrink!</button>
      <hr>
      <div
        style="width: 100px; height: 100px"
        [@divState]="state"
        (@divState.start)="animationStarted($event)"
        (@divState.done)="animationEnded($event)"
      >

      </div>
      <br>
      <div
        style="width: 100px; height: 100px"
        [@wildState]="wildState"
      >

      </div>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <input type="text" #input>
      <button class="btn btn-primary" (click)="onAdd(input.value)">Add Item!</button>
      <hr>
      <ul class="list-group">
        <li
          class="list-group-item"
          (click)="onDelete(item)"
          [@list1]
          *ngFor="let item of list">
          {{ item }}
        </li>
      </ul>
      <hr>
      <ul class="list-group">
        <li
          class="list-group-item"
          (click)="onDelete(item)"
          [@list2]
          *ngFor="let item of list">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</div>