angular/aio/content/examples/animations/src/app/open-close.component.2.ts
2018-09-19 10:37:31 -07:00

24 lines
639 B
TypeScript

import { Component } from '@angular/core';
import { trigger, transition, state, animate, style } from '@angular/animations';
@Component({
selector: 'app-open-close-boolean',
// #docregion trigger-boolean
animations: [
trigger('openClose', [
state('true', style({ height: '*' })),
state('false', style({ height: '0px' })),
transition('false <=> true', animate(500))
])
],
// #enddocregion trigger-boolean
templateUrl: 'open-close.component.2.html',
styleUrls: ['open-close.component.css']
})
export class OpenCloseBooleanComponent {
isOpen = false;
toggle() {
this.isOpen = !this.isOpen;
}
}