1

I have a hybrid Angular/AngularJS application. To run this application without performance issues I run it as an AngularJS application using Angular's "downgradeModule".

I also have the need to use a scroll cdk directive that lives in Angular 8 within my AngularJS application.

For example, this is an AngularJS template. The "scroll-wrapper" component resides in the Angular module. That scroll-wrapper uses the scroll cdk to make sure any other downgraded Angular components inside will scroll correctly.

<div>
  <p>This Content will remain until animation is complete</p>

  <scroll-wrapper>
    <div>
      Slide Over Content <br>
      This will disappear early <br>
    </div>
  </scroll-wrapper>

</div>

All of this functionality works in my application. When think break is when I add in an animation. For some reason when I animate the above template in/out, the content in scroll-wrapper work fine on "in" animation, but that same content disappears early (before the animation is complete) on the "out" animation.

enter image description here

Here is the stackblitz I created as that is probably the easiest way to showcase and debug.

https://stackblitz.com/edit/angular-h3swa7

lostintranslation
  • 23,756
  • 50
  • 159
  • 262
  • I think its working perfectly, just increase the duration to 5second in CSS and check. – Jasdeep Singh Apr 16 '20 at 18:01
  • @Prince sorry that does not work. The test that says "This will disappear early" should not disappear before the animation is complete. You can see this by removing the "scroll-wrapper" element from slide.component.js. – lostintranslation Apr 17 '20 at 20:35
  • if you talk about performance you should not use angular.is quite simple –  Apr 22 '20 at 14:49

1 Answers1

1

As per code, you are trying to handle the visibility of Angular component using AngularJS. Right now as soon as you click on the toggle button, it makes the expression inside the ng-if as false and removes the content(which is Angular component).

Ideally, the whole slide template should disappear but due to animation, you are able to see it.

If you want to keep the content until the entire slide Div disappears, you need to import the BrowserAnimationsModule inside app.module.ts. This will keep the transition alive until your slide DIV disappears.

Changes needed:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports:[ BrowserModule,BrowserAnimationsModule ],
  declarations: [ ScrollWrapperComponent ],
  bootstrap:    [ ],
  entryComponents: [ ScrollWrapperComponent ]
})

Please find the working example here

You can learn more about animations here: https://angular.io/guide/animations

Jasdeep Singh
  • 7,901
  • 1
  • 11
  • 28
  • thank you, that did fix the stackblitz that I posted. Unfortunately I wrote the stackblitz to highlight a problem I was having with a bigger application. In that application I already imported BrowserAnimationsModul. I will keep digging to see what the difference might be between the working stackblitz and my app. If you have any other ideas why my app might be exhibiting the same behavior I am all ears. – lostintranslation Apr 20 '20 at 01:11
  • I will think but it will be less possible without looking at your website/code. – Jasdeep Singh Apr 20 '20 at 03:36
  • Did you find the issue? I am not able to think of any reason which is causing this issue. – Jasdeep Singh Apr 21 '20 at 17:15