How to build a summary/details card view transition in Angular and NativeScript. From: https://youtu.be/hK5oHdq9dx4

card.component.ts

@Component({
  moduleId: module.id,
  selector: 'lol-card',
  template: `
      <GridLayout [@container]="state$ | async" (tap)="toggle()">
          <AbsoluteLayout>
              <Image [@image]="state$ | async"></Image>
              <Gradient [@gradient]="state$ | async"></Gradient>
          </AbsoluteLayout>
      </GridLayout>
  `,
  animations: [
    trigger('container', [
      state('default', style({transform: 'scale(0.9)'})),
      state('details', style({transform: 'scale(1)'})),
      transition('details => default', animate('100ms ease')),
      transition('default => details', animate('100ms ease')),
    ]),
    trigger('gradient', [
      state('details', style({opacity: 0})),
      state('default', style({opacity: 1})),
      transition('details => default', animate('400ms 100ms ease')),
    ]),
    trigger('image', [
      state('details', style({height: '40%'})),
      state('default', style({height: '100%'})),
      transition('default => details', animate('200ms easeOut')),
      transition('details => default', animate('200ms easeOut')),
    ]),
  ]
})
export class CardComponent {
  state$ = new BehaviorSubject('default');

  toggle() {
    this.state$.next(this.state$.value === 'default' ? 'details' : 'default');
  }
}