fix(overlay): backdrop exit animation not working

[crisbeto]

Fixes the transition when closing an overlay with an opaque backdrop appearing broken. The issue comes the fact that when we start animating the backdrop out, we also remove the backdropClass which makes the backdrop transparent. We don't need to remove the class, because we'll remove the backdrop from the DOM and clear the reference once the transition is done.

[jelbourn]

I just noticed that we should also attach this listener outside the zone.

[crisbeto]

Done.

[jelbourn]

LGTM

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[josephperrott]

@crisbeto Please rebase when you have a chance

[crisbeto]

Rebased.

[ngbot]

I see that you just added the pr: merge ready label, but the following checks are still failing:
     forbidden label detected: presubmit failures
     status "ci/circleci: build" is pending
     status "continuous-integration/travis-ci/pr" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[ngbot]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[Guerric-P]

The following code used to show the Overlay only when resolving data or loading lazy modules:

CoreModule

router.events.pipe(
  filter(x => x instanceof NavigationStart)
).subscribe(() => loaderService.show());

router.events.pipe(
  filter(x => x instanceof NavigationEnd || x instanceof NavigationCancel || x instanceof NavigationError)
).subscribe(() => loaderService.hide());

LoaderService

export class LoaderService {

    overlayRef: OverlayRef;
    componentFactory: ComponentFactory<LoaderComponent>;
    componentPortal: ComponentPortal<LoaderComponent>;
    componentRef: ComponentRef<LoaderComponent>;

    constructor(
        private overlay: Overlay,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
        this.overlayRef = this.overlay.create(
            {
                hasBackdrop: true,
                positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
            }
        );

        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(LoaderComponent);

        this.componentPortal = new ComponentPortal(this.componentFactory.componentType);
    }

    show(message?: string) {
        this.componentRef = this.overlayRef.attach<LoaderComponent>(this.componentPortal);
        this.componentRef.instance.message = message;
    }

    hide() {
        this.overlayRef.detach();
    }
}

Now it shows the Overlay even on routes without data or lazy module. Can you confirm this fix broke my code? If so, can you suggest what I should do to restore the previous behavior?

For reference, my question on StackOverflow: https://stackoverflow.com/questions/54135784/updating-to-angular-7-2-broke-my-global-loader

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}