48 lines
958 B
TypeScript
48 lines
958 B
TypeScript
import {
|
|
Component,
|
|
Input
|
|
} from '@angular/core';
|
|
import {
|
|
trigger,
|
|
state,
|
|
style,
|
|
animate,
|
|
transition
|
|
} from '@angular/animations';
|
|
|
|
import { Hero } from './hero.service';
|
|
|
|
@Component({
|
|
selector: 'app-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: Hero[];
|
|
}
|