Ngx-formly: Animations with hideExpression function

[ThrownLemon]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Would it possible to provide a demo or some advice on how you would use the hideExpression function with Angular animations?

For example applying some type transition effect to the fieldGroup.

Thanks in advance.

[aitboudad]

I think you can do it by using a custom wrapper and change the animation state based on hide property.

[aitboudad]

it would be nice if you can add an example in our demo.

[davidoween]

Hello, I need animation in hiddenExpresision, but i cant to create custom wrapper. What could I do?

You could create a property in the json:

transitionShow: slide1
transitionHidden: slide1

I can do it if you indicate me where to modify it and make a PR

thanks

[davidoween]

have you thought anything about animation, friend?

[aitboudad]

see https://stackblitz.com/edit/ngx-formly-animation

[davidoween]

In a simple field, you can not, right? it would be good use:

{
key: 'firstName',
type: 'input',
animation: true,
templateOptions: {
required: true,
type: 'text',
label: 'First Name',
},
},

[aitboudad]

possible but you have to wait until tomorrow :)

[davidoween]

thanks.

[davidoween]

Animations do not work when hidden. The same thing happens with all.
what's going on?

https://stackblitz.com/edit/ngx-formly-animation-yhjg6e?file=app/app.component.ts

[aitboudad]

you have to disable the default hide behavior

  // disable hide default behavior
  styles: [`
    ::ng-deep formly-field {
      display: block !important;
    }
`]

see https://stackblitz.com/edit/ngx-formly-animation-zzcq4s

[davidoween]

great

[aitboudad]

see https://stackblitz.com/edit/ngx-formly-animation-zzcq4s

[davidoween]

yeahhhhh.

But just one more details. with both do not work. (field and fieldgroup)

https://stackblitz.com/edit/ngx-formly-animation-sreafs?file=app/app.component.ts

[aitboudad]

in style add :host selector:

styles: [`
  :host::ng-deep formly-field {
    display: block !important;
  }
`]

[davidoween]

in style add :host selector:

with :host selector the Animations do not work when hidden.

what is happening?

[aitboudad]

the wrapper is inside formly-field, here is another way to solve it:
https://stackblitz.com/edit/ngx-formly-animation-bdjyij

by adding disable-default-hide class into animated field

.disable-default-hide {
  display: block !important;
}

[davidoween]

But when the element is hidden, the animation does not work

This is a example

https://stackblitz.com/edit/ngx-formly-animation-m3txne?file=app/animation-wrapper.component.ts

[aitboudad]

you should move disable-default-hide into the main css or use ViewEncapsulation.None

[davidoween]

You could show an example. I can not make it work

[aitboudad]

https://stackblitz.com/edit/ngx-formly-animation-bdjyij

[davidoween]

Oh ok ok, now this is not necessary: wrappers: ['animation'], but I have to use: animation: true, not only in the wrappers field but also in the input field. right?

[aitboudad]

I think so

[davidoween]

hello, I'm testing animations with text (template) but they do not work

https://stackblitz.com/edit/angular-dstmcq?file=src%2Fapp%2Fanimation-wrapper.component.ts

[aitboudad]

you have to wrap it inside a fieldGroup see https://stackblitz.com/edit/angular-dstmcq-k7rwwc