docs(aio): update migrated content from anguar.io

aio/content/examples/animations/src/app/app.module.ts

@@ -0,0 +1,38 @@
+// #docregion animations-module
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// #enddocregion animations-module
+
+import { HeroTeamBuilderComponent } from './hero-team-builder.component';
+import { HeroListBasicComponent } from './hero-list-basic.component';
+import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component';
+import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component';
+import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component';
+import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component';
+import { HeroListTwowayComponent } from './hero-list-twoway.component';
+import { HeroListAutoComponent } from './hero-list-auto.component';
+import { HeroListGroupsComponent } from './hero-list-groups.component';
+import { HeroListMultistepComponent } from './hero-list-multistep.component';
+import { HeroListTimingsComponent } from './hero-list-timings.component';
+
+// #docregion animation-module
+@NgModule({
+  imports: [ BrowserModule, BrowserAnimationsModule ],
+  // #enddocregion animation-module
+  declarations: [
+    HeroTeamBuilderComponent,
+    HeroListBasicComponent,
+    HeroListInlineStylesComponent,
+    HeroListCombinedTransitionsComponent,
+    HeroListTwowayComponent,
+    HeroListEnterLeaveComponent,
+    HeroListEnterLeaveStatesComponent,
+    HeroListAutoComponent,
+    HeroListTimingsComponent,
+    HeroListMultistepComponent,
+    HeroListGroupsComponent
+  ],
+  bootstrap: [ HeroTeamBuilderComponent ]
+})
+export class AppModule { }

aio/content/examples/animations/src/app/hero-list-auto.component.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-auto',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@shrinkOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+
+  /* When the element leaves (transition "in => void" occurs),
+   * get the element's current computed height and animate
+   * it down to 0.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('shrinkOut', [
+      state('in', style({height: '*'})),
+      transition('* => void', [
+        style({height: '*'}),
+        animate(250, style({height: 0}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListAutoComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-basic.component.ts

@@ -0,0 +1,70 @@
+// #docplaster
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-basic',
+  // #enddocregion
+  /* The click event calls hero.toggleState(), which
+   * causes the state of that hero to switch from
+   * active to inactive or vice versa.
+   */
+  // #docregion
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@heroState]="hero.state"
+          (click)="hero.toggleState()">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  // #enddocregion
+  /**
+   * Define two states, "inactive" and "active", and the end
+   * styles that apply whenever the element is in those states.
+   * Then define animations for transitioning between the states,
+   * one in each direction
+   */
+  // #docregion
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      // #docregion states
+      state('inactive', style({
+        backgroundColor: '#eee',
+        transform: 'scale(1)'
+      })),
+      state('active',   style({
+        backgroundColor: '#cfd8dc',
+        transform: 'scale(1.1)'
+      })),
+      // #enddocregion states
+      // #docregion transitions
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out'))
+      // #enddocregion transitions
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListBasicComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts

@@ -0,0 +1,59 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ selector: 'hero-list-combined-transitions',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive => active, active => inactive',
+      animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListCombinedTransitionsComponent {
+ @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-enter-leave-states',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (click)="hero.toggleState()"
+          [@heroState]="hero.state">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The elements here have two possible states based
+   * on the hero state, "active", or "inactive". We animate
+   * six transitions: Between the two states in both directions,
+   * and between each state and void. With this we can animate
+   * the enter and leave of elements differently based on which
+   * state they are in when they are added and removed.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('heroState', [
+      state('inactive', style({transform: 'translateX(0) scale(1)'})),
+      state('active',   style({transform: 'translateX(0) scale(1.1)'})),
+      transition('inactive => active', animate('100ms ease-in')),
+      transition('active => inactive', animate('100ms ease-out')),
+      transition('void => inactive', [
+        style({transform: 'translateX(-100%) scale(1)'}),
+        animate(100)
+      ]),
+      transition('inactive => void', [
+        animate(100, style({transform: 'translateX(100%) scale(1)'}))
+      ]),
+      transition('void => active', [
+        style({transform: 'translateX(0) scale(0)'}),
+        animate(200)
+      ]),
+      transition('active => void', [
+        animate(200, style({transform: 'translateX(0) scale(0)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveStatesComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts

@@ -0,0 +1,51 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-enter-leave',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({transform: 'translateX(-100%)'}),
+        animate(100)
+      ]),
+      transition('* => void', [
+        animate(100, style({transform: 'translateX(100%)'}))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListEnterLeaveComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-groups.component.ts

@@ -0,0 +1,80 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  group
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-groups',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  styles: [`
+    li {
+      padding: 0 !important;
+      text-align: center;
+    }
+  `],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition.
+   *
+   * The transitions have  *parallel group* that allow
+   * animating several properties at the same time but
+   * with different timing configurations. On enter
+   * (void => *) we start the opacity animation 0.1s
+   * earlier than the translation/width animation.
+   * On leave (* => void) we do the opposite -
+   * the translation/width animation begins immediately
+   * and the opacity animation 0.1s later.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
+      transition('void => *', [
+        style({width: 10, transform: 'translateX(50px)', opacity: 0}),
+        group([
+          animate('0.3s 0.1s ease', style({
+            transform: 'translateX(0)',
+            width: 120
+          })),
+          animate('0.3s ease', style({
+            opacity: 1
+          }))
+        ])
+      ]),
+      transition('* => void', [
+        group([
+          animate('0.3s ease', style({
+            transform: 'translateX(50px)',
+            width: 10
+          })),
+          animate('0.3s 0.2s ease', style({
+            opacity: 0
+          }))
+        ])
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListGroupsComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts

@@ -0,0 +1,60 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  trigger,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ selector: 'hero-list-inline-styles',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /**
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animation for the inactive => active transition.
+  * This animation has no end styles, but only styles that are
+  * defined inline inside the transition and thus are only kept
+  * as long as the animation is running.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     // #docregion transitions
+     transition('inactive => active', [
+       style({
+         backgroundColor: '#cfd8dc',
+         transform: 'scale(1.3)'
+       }),
+       animate('80ms ease-in', style({
+         backgroundColor: '#eee',
+         transform: 'scale(1)'
+       }))
+     ]),
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListInlineStylesComponent {
+ @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-multistep.component.ts

@@ -0,0 +1,71 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+  keyframes,
+  AnimationEvent
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-multistep',
+  // #docregion template
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          (@flyInOut.start)="animationStarted($event)"
+          (@flyInOut.done)="animationDone($event)"
+          [@flyInOut]="'in'">
+        {{hero.name}}
+      </li>
+    </ul>
+  `,
+  // #enddocregion template
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. Each transition is
+   * defined in terms of multiple keyframes, to give it
+   * a bounce effect.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({transform: 'translateX(0)'})),
+      transition('void => *', [
+        animate(300, keyframes([
+          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
+          style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
+          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
+        ]))
+      ]),
+      transition('* => void', [
+        animate(300, keyframes([
+          style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
+          style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
+          style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
+        ]))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListMultistepComponent {
+  @Input() heroes: Heroes;
+
+  animationStarted(event: AnimationEvent) {
+    console.warn('Animation started: ', event);
+  }
+
+  animationDone(event: AnimationEvent) {
+    console.warn('Animation done: ', event);
+  }
+}

aio/content/examples/animations/src/app/hero-list-timings.component.ts

@@ -0,0 +1,58 @@
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-list-timings',
+  template: `
+    <ul>
+      <li *ngFor="let hero of heroes"
+          [@flyInOut]="'in'"
+          (click)="hero.toggleState()">
+         {{hero.name}}
+      </li>
+    </ul>
+  `,
+  styleUrls: ['./hero-list.component.css'],
+  /* The element here always has the state "in" when it
+   * is present. We animate two transitions: From void
+   * to in and from in to void, to achieve an animated
+   * enter and leave transition. The element enters from
+   * the left and leaves to the right using translateX,
+   * and fades in/out using opacity. We use different easings
+   * for enter and leave.
+   */
+  // #docregion animationdef
+  animations: [
+    trigger('flyInOut', [
+      state('in', style({opacity: 1, transform: 'translateX(0)'})),
+      transition('void => *', [
+        style({
+          opacity: 0,
+          transform: 'translateX(-100%)'
+        }),
+        animate('0.2s ease-in')
+      ]),
+      transition('* => void', [
+        animate('0.2s 10 ease-out', style({
+          opacity: 0,
+          transform: 'translateX(100%)'
+        }))
+      ])
+    ])
+  ]
+  // #enddocregion animationdef
+})
+export class HeroListTimingsComponent {
+  @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list-twoway.component.ts

@@ -0,0 +1,58 @@
+// #docregion
+// #docregion imports
+import {
+  Component,
+  Input
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/animations';
+// #enddocregion imports
+
+import { Heroes } from './hero.service';
+
+@Component({
+ selector: 'hero-list-twoway',
+ // #docregion template
+ template: `
+   <ul>
+     <li *ngFor="let hero of heroes"
+         [@heroState]="hero.state"
+         (click)="hero.toggleState()">
+       {{hero.name}}
+     </li>
+   </ul>
+ `,
+ // #enddocregion template
+ styleUrls: ['./hero-list.component.css'],
+ /*
+  * Define two states, "inactive" and "active", and the end
+  * styles that apply whenever the element is in those states.
+  * Then define an animated transition between these two
+  * states, in *both* directions.
+  */
+ // #docregion animationdef
+ animations: [
+   trigger('heroState', [
+     state('inactive', style({
+       backgroundColor: '#eee',
+       transform: 'scale(1)'
+     })),
+     state('active',   style({
+       backgroundColor: '#cfd8dc',
+       transform: 'scale(1.1)'
+     })),
+     // #docregion transitions
+     transition('inactive <=> active', animate('100ms ease-out'))
+     // #enddocregion transitions
+   ])
+ ]
+ // #enddocregion animationdef
+})
+export class HeroListTwowayComponent {
+ @Input() heroes: Heroes;
+}

aio/content/examples/animations/src/app/hero-list.component.css

@@ -0,0 +1,27 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: block;
+  width: 120px;
+  line-height: 50px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background-color: #eee;
+  border-radius: 4px;
+  margin: 10px;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.active {
+  background-color: #cfd8dc;
+  transform: scale(1.1);
+}
+.inactive {
+  background-color: #eee;
+  transform: scale(1);
+}

aio/content/examples/animations/src/app/hero-team-builder.component.ts

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+
+import { Heroes } from './hero.service';
+
+@Component({
+  selector: 'hero-team-builder',
+  template: `
+    <div class="buttons">
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
+      <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h4>Basic State</h4>
+        <p>Switch between active/inactive on click.</p>
+        <hero-list-basic [heroes]=heroes></hero-list-basic>
+      </div>
+      <div class="column">
+        <h4>Styles inline in transitions</h4>
+        <p>Animated effect on click, no persistend end styles.</p>
+        <hero-list-inline-styles [heroes]=heroes></hero-list-inline-styles>
+      </div>
+      <div class="column">
+        <h4>Combined transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
+        <hero-list-combined-transitions [heroes]=heroes></hero-list-combined-transitions>
+      </div>
+      <div class="column">
+        <h4>Two-way transition syntax</h4>
+        <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
+        <hero-list-twoway [heroes]=heroes></hero-list-twoway>
+      </div>
+      <div class="column">
+        <h4>Enter & Leave</h4>
+        <p>Enter and leave animations using the void state.</p>
+        <hero-list-enter-leave [heroes]=heroes></hero-list-enter-leave>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h4>Enter & Leave & States</h4>
+        <p>
+          Enter and leave animations combined with active/inactive state animations.
+          Different enter and leave transitions depending on state.
+        </p>
+        <hero-list-enter-leave-states [heroes]=heroes></hero-list-enter-leave-states>
+      </div>
+      <div class="column">
+        <h4>Auto Style Calc</h4>
+        <p>Leave animation from the current computed height using the auto-style value *.</p>
+        <hero-list-auto [heroes]=heroes></hero-list-auto>
+      </div>
+      <div class="column">
+        <h4>Different Timings</h4>
+        <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
+        <hero-list-timings [heroes]=heroes></hero-list-timings>
+      </div>
+      <div class="column">
+        <h4>Multiple Keyframes</h4>
+        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
+        <hero-list-multistep [heroes]=heroes></hero-list-multistep>
+      </div>
+      <div class="column">
+        <h4>Parallel Groups</h4>
+        <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
+        <hero-list-groups [heroes]=heroes></hero-list-groups>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .buttons {
+      text-align: center;
+    }
+    button {
+      padding: 1.5em 3em;
+    }
+    .columns {
+      display: flex;
+      flex-direction: row;
+    }
+    .column {
+      flex: 1;
+      padding: 10px;
+    }
+    .column p {
+      min-height: 6em;
+    }
+  `],
+  providers: [Heroes]
+})
+export class HeroTeamBuilderComponent {
+  constructor(private heroes: Heroes) { }
+}

aio/content/examples/animations/src/app/hero.service.ts

@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+
+class Hero {
+  constructor(public name: string,
+              public state = 'inactive') {
+  }
+
+  toggleState() {
+    this.state = (this.state === 'active' ? 'inactive' : 'active');
+  }
+}
+
+let ALL_HEROES = [
+  'Windstorm',
+  'RubberMan',
+  'Bombasto',
+  'Magneta',
+  'Dynama',
+  'Narco',
+  'Celeritas',
+  'Dr IQ',
+  'Magma',
+  'Tornado',
+  'Mr. Nice'
+].map(name => new Hero(name));
+
+@Injectable()
+export class Heroes implements Iterable<Hero> {
+
+  currentHeroes: Hero[] = [];
+
+  [Symbol.iterator]() {
+    return this.currentHeroes.values();
+  }
+
+  canAdd() {
+    return this.currentHeroes.length < ALL_HEROES.length;
+  }
+
+  canRemove() {
+    return this.currentHeroes.length > 0;
+  }
+
+  addActive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'active';
+    this.currentHeroes.push(hero);
+  }
+
+  addInactive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'inactive';
+    this.currentHeroes.push(hero);
+  }
+
+  remove() {
+    this.currentHeroes.splice(this.currentHeroes.length - 1, 1);
+  }
+
+}