Animating with variables Angular 4

Question

I'm using @angular/animations: 4.4.6 to try and have an expand/collapse animation for a component that will display lots of text. As a default it will display a certain amount of text, but different parent components can define a different collapse height.
From what I can tell, I'm doing everything right. But the animations decorator is ignoring the input, and going directly for the default value.

import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style({
        height: '{{min_height}}',
      }), {params: {min_height: '4.125em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})
export class LongTextComponent implements OnInit {

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() {

   }

  ngOnInit() {
  }

  expandText(){
    this.longTextState = this.longTextState === 'expanded' ? 'collapsed' : 'expanded';
  }
}

And the html: <div [@expandCollapse]="{value: longTextState, min_height: minHeight}" [innerHtml]="textBody" >

EDIT for completeness sake: the parent <div> of the one with the animation (mentioned above) has a (click)="expandTex()" attribute.

_From what I can tell, I'm doing everything right. _ can you please reproduce this issue in stackblitz — Rahul Singh
– Rahul Singh, Commented Nov 5, 2017 at 15:05
@RahulSingh: angular-mh66ap.stackblitz.io You can see that the animation works, but it falls back to the default value of the collapsed height, not the value it got in the @Input(). — AvailableName
– AvailableName, Commented Nov 5, 2017 at 16:19

Raphaël Balet · Accepted Answer · 2021-01-22 09:27:22Z

You need to wrap the param values in the template in an object "params"

   @Component({
  selector: 'hello',
  template:  `<div (click)="expandText()" style="cursor: pointer">
                <div [@expandCollapse]="{value: longTextState, params:{min_height: minHeight}}" [innerHtml]="textBody" style="overflow: hidden;">
                </div> // you need to wrap it in params the input values
                <h1>{{longTextState}}</h1>
                <h1>this.minHeight: {{minHeight}}</h1>
              </div>`,
  styles: [`h1 { font-family: Lato; }`],
  animations: [
    trigger('expandCollapse',[
      state('collapsed', style({
        height: '{{min_height}}',
      }), {params: {min_height: '3em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})

Working LINK

Collectives™ on Stack Overflow

Animating with variables Angular 4

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related