Animating Modal Windows While Blocking Intra-Modal Transitions In Angular 5.2.6

// Import the core angular services.
import { Component } from "@angular/core";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<p>
			<a routerLink="/app/modal/one">Open Modal One</a> &mdash;
			<a routerLink="/app/modal/two">Open Modal Two</a>
		</p>

		<p>
			This is some sweet content here!
		</p>

		<router-outlet></router-outlet>
	`
})
export class AppComponent {
	// ...
}

// Import the core angular services.
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";

// Import the application components and services.
import { AppComponent } from "./app.component";
import { ModalOneViewComponent } from "./modal-one-view.component";
import { ModalTwoViewComponent } from "./modal-two-view.component";
import { ModalViewComponent } from "./modal-view.component";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@NgModule({
	bootstrap: [
		AppComponent
	],
	imports: [
		BrowserAnimationsModule,
		BrowserModule,
		RouterModule.forRoot(
			[
				{
					path: "app",
					children: [
						{
							path: "modal",
							component: ModalViewComponent,
							children: [
								{
									path: "one",
									component: ModalOneViewComponent
								},
								{
									path: "two",
									component: ModalTwoViewComponent
								}
							]
						}
					]
				}
			],
			{
				// Tell the router to use the HashLocationStrategy.
				useHash: true,
				enableTracing: false
			}
		)
	],
	declarations: [
		AppComponent,
		ModalOneViewComponent,
		ModalTwoViewComponent,
		ModalViewComponent
	],
	providers: [
		// CAUTION: We don't need to specify the LocationStrategy because we are setting
		// the "useHash" property in the Router module above (which will be setting the
		// strategy for us).
		// --
		// {
		// provide: LocationStrategy,
		// useClass: HashLocationStrategy
		// }
	]
})
export class AppModule {
	// ...
}

// Import the core angular services.
import { animateChild } from "@angular/animations";
import { Component } from "@angular/core";
import { OnDestroy } from "@angular/core";
import { OnInit } from "@angular/core";
import { query } from "@angular/animations";
import { Router } from "@angular/router";
import { transition } from "@angular/animations";
import { trigger } from "@angular/animations";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "modal-view",
	// Bind an animation trigger to the router-outlet-injected view itself.
	host: {
		"[@modalView]": "navigationCount"
	},
	animations: [
		trigger(
			"modalView",
			[
				// If this modal-view is rendered as part of a page refresh, we don't
				// want to include any animations - animations are for mental modal; and,
				// if this is the initial page load, there can be no meaningful mental
				// model portrayed for the user and the modal window. As such, we need to
				// denote the modal-view has having a "transition" so that the nested
				// view transitions will be inherently blocked.
				transition( "void => 0", [] ),

				// While we don't want a transition on page-refresh, we certainly do want
				// the animations to play when the modal-view is opened or closed during
				// the normal control flow of the application. As such, for the :enter
				// :leave transitions, we want to query for the router-outlet component
				// and ask its animations to run (if it has any).
				transition(
					":enter, :leave",
					[
						// As the modal-view enters or leaves, we want to allow any of
						// nested view animations to execute.
						// --
						// CAUTION: This query selector does not get the simulated
						// encapsulation attribute selectors. This will go DEEP through
						// the descendant DOM tree if you're not careful. As such, we
						// MUST USE the "limit" property to prevent deeper matches from
						// being exercised.
						query(
							"@*",
							animateChild(),
							{
								limit: 1,
								optional: true
							}
						)
					]
				),

				// By default, we want to block all nested animations (and then
				// selectively re-enable them using the transitions above). As such, we
				// have to define a generic no-op transition from every state to every
				// other state. This transition will inherently block the transitions
				// contained within any nested views.
				transition( "* <=> *", [] )
			]
		)
	],
	styleUrls: [ "./modal-view.component.less" ],
	template:
	`
		<router-outlet (activate)="handleActivate()"></router-outlet>
	`
})
export class ModalViewComponent implements OnInit, OnDestroy {

	public navigationCount: number;

	// I initialize the modal-view component.
	constructor( router: Router ) {

		// If the router has NOT YET BEEN NAVIGATED, it means that this rendering is the
		// initial loading of the application. As such, we do not want to animate the
		// modal window. By changing the value here, we can pin-point the first load in
		// the animation trigger state transition.
		// --
		// NOTE: Ideally, this kind of logic would just be on the APP COMPONENT; but,
		// for some reason, I cannot get a transition on the app component to block
		// animations that are nested in the view-tree.
		this.navigationCount = router.navigated
			? 0
			: -1 // First navigation will transition ( -1 => 0 )
		;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I handle the activation event of every new view that's mounted inside the modal-
	// view's router-outlet.
	public handleActivate() : void {

		// When transitioning from one modal window to another, we need to have the top-
		// level modal-view's animation run such that it blocks the views in the nested
		// modal instances. In order to do that, we need to have a state-transition. And,
		// in order to force a state-transition, we're just going to increment a value
		// every time the sub-view changes.
		this.navigationCount++;

	}


	// I get called once when the input is being unmounted.
	public ngOnDestroy() : void {

		// Allow the normal scrollbars to show on the document viewport.
		document.documentElement.style.overflow = "auto";
		document.body.style.overflow = "auto";

	}


	// I get called once after the inputs have been bound for the first time.
	public ngOnInit() : void {

		// Hide the scrollbars on the document viewport while the modal window is
		// open. This will prevent scrolling in the modal layout from causing unwanted
		// scrolling in the main document viewport.
		document.documentElement.style.overflow = "hidden";
		document.body.style.overflow = "hidden";

	}

}

// Import the core angular services.
import { animate } from "@angular/animations";
import { Component } from "@angular/core";
import { query } from "@angular/animations";
import { style } from "@angular/animations";
import { transition } from "@angular/animations";
import { trigger } from "@angular/animations";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "modal-one-view",
	// Bind an animation trigger to the router-outlet-injected view itself.
	// --
	// CAUTION: The animation trigger does not seem to get picked-up if it's just an
	// attribute. Meaning, it has to be a [property] assignment.
	host: {
		"[@modalOneView]": "true"
	},
	animations: [
		// Define animations for the ROUTABLE VIEW itself, which has a HOST BINDING for
		// this animation trigger.
		trigger(
			"modalOneView",
			[
				transition(
					":enter",
					[
						// Since we're going to be animating the modal in from an off-
						// screen location, we want to disable any local overflow so that
						// we don't see the interim scrollbars.
						style({
							overflow: "hidden"
						}),
						// Animate the content container in from the left.
						// --
						// CAUTION: This query selector does not get the simulated
						// encapsulation attribute selectors. This will go DEEP
						// through the descendant DOM tree if you're not careful.
						query(
							".content",
							[
								style({
									left: "-10%"
								}),
								animate(
									"1000ms ease-out",
									style({
										left: "*"
									})
								)
							]
						)

					]
				),
				transition(
					":leave",
					[
						// Since we're going to be animating the modal out to an off-
						// screen location, we want to disable any local overflow so that
						// we don't see the interim scrollbars.
						style({
							overflow: "hidden"
						}),
						// Animate the content container out to the left.
						// --
						// CAUTION: This query selector does not get the simulated
						// encapsulation attribute selectors. This will go DEEP
						// through the descendant DOM tree if you're not careful.
						query(
							".content",
							[
								style({
									left: "*"
								}),
								animate(
									"1000ms ease-in",
									style({
										left: "-10%"
									})
								)
							]
						)

					]
				)
			]
		)
	],
	styleUrls: [ "./modal-one-view.component.less" ],
	template:
	`
		<div class="content">
			<h2>
				Modal One
			</h2>

			<p>
				Bruv, this modal is player, init?
			</p>

			<p>
				<a routerLink="/app/modal/two">Goto modal Two</a>
			</p>

			<p>
				or, <a routerLink="/">Close</a>
			</p>

			<p>
				<strong>NOTE</strong>: Refresh the page to see that animations
				are blocked on the nested view.
			</p>
		</div>
	`
})
export class ModalOneViewComponent {
	// ...
}