Most Of Your Modal Windows Should Be Directly Accessible By Route In Angular 7.2.15

RouterModule.forRoot(
	[
		// Redirecting to keep all of the app under the "/app" prefix. This
		// helps deal with some routing issues with empty segments.
		{
			path: "",
			pathMatch: "full",
			redirectTo: "app"
		},
		{
			path: "app",
			children: [
				{
					path: "friends",
					component: FriendsViewComponent
				},
				// Notice that the "add-friend" view is in the "modal" outlet.
				// This allows it (and most of your modals) to be shown to the
				// user regardless of what is in the primary outlet. This is what
				// makes Auxiliary Routes so freaking exciting!
				{
					path: "modal",
					outlet: "modal",
					component: ModalViewComponent,
					children: [
						{
							path: "add-friend",
							component: AddFriendViewComponent
						}
					]
				}
			]
		}
	],
	{
		// Tell the router to use the hash instead of HTML5 pushstate.
		useHash: true,

		// Enable the Angular 6+ router features for scrolling and anchors.
		scrollPositionRestoration: "enabled",
		anchorScrolling: "enabled",
		enableTracing: false
	}
)

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

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

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<p>
			<a routerLink="/app">Goto Home</a>
			&mdash;
			<a routerLink="/app/friends">Goto Friends</a>
			&mdash;
			<a [routerLink]="[ '/app', { outlets: { modal: 'modal/add-friend' } } ]">
				Add Friends From Home
			</a>
		</p>

		<!-- Primary outlet. -->
		<router-outlet></router-outlet>

		<!-- Modal outlet. -->
		<router-outlet name="modal"></router-outlet>
	`
})
export class AppComponent {
	// ...
}

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

// Import the application components and services.
import { Friend } from "./friends.runtime";
import { FriendsRuntime } from "./friends.runtime";
import { SubscriptionManager } from "./subscription-manager";

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

@Component({
	selector: "friends-view",
	styleUrls: [ "./friends-view.component.less" ],
	template:
	`
		<h2>
			Friends
		</h2>

		<p>
			<a [routerLink]="[ '/app', { outlets: { modal: 'modal/add-friend' } } ]">
				Add Friends From Friends
			</a>
		</p>

		<ul *ngIf="friends.length">
			<li *ngFor="let friend of friends">

				<div class="friend">
					<span class="friend__name">
						{{ friend.name }}
					</span>

					<a (click)="removeFriend( friend )" class="friend__remove">
						remove friend {{ friend.id }}
					</a>
				</div>

			</li>
		</ul>
	`
})
export class FriendsViewComponent {

	public friends: Friend[];

	private friendsRuntime: FriendsRuntime;
	private subscriptions: SubscriptionManager;

	// I initialize the friends-view component.
	constructor( friendsRuntime: FriendsRuntime ) {

		this.friendsRuntime = friendsRuntime;

		this.friends = [];
		this.subscriptions = new SubscriptionManager();

	}

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

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

		this.subscriptions.unsubscribe();

	}


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

		this.subscriptions.add(
			this.friendsRuntime.getFriends().subscribe(
				( friends ) => {

					this.friends = friends;

				}
			)
		);

	}


	// I remove the given friend.
	public removeFriend( friend: Friend ) : void {

		this.friendsRuntime
			.removeFriend( friend.id )
			.catch(
				( error ) => {

					console.warn( "The given friend could not be removed!" );
					console.error( error );

				}
			)
		;

	}

}

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

// Import the application components and services.
import { FriendsRuntime } from "./friends.runtime";
import { ModalViewComponent } from "./modal-view.component";

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

@Component({
	selector: "add-friend-view",
	queries: {
		nameRef: new ViewChild( "nameRef" )
	},
	styleUrls: [ "./add-friend-view.component.less" ],
	template:
	`
		<a (click)="closeModal()" class="close">
			&times;
		</a>

		<h2 class="title">
			Add New Friend
		</h2>

		<form (submit)="processForm()" class="form">

			<div class="field">
				<input
					#nameRef
					type="text"
					name="name"
					[(ngModel)]="form.name"
					class="field__input"
				/>

				<button type="submit" class="field__submit">
					Add Friend
				</button>
			</div>

			<label for="add-friend-view-bulk-checkbox" class="bulk">
				<input
					id="add-friend-view-bulk-checkbox"
					type="checkbox"
					name="isBulkAction"
					[(ngModel)]="form.isBulkAction"
					class="bulk__input"
				/>

				<span class="bulk__label">
					I want to add multiple friends.
				</span>
			</label>

		</form>
	`
})
export class AddFriendViewComponent {
	
	public form: {
		isBulkAction: boolean;
		name: string;
	};
	public nameRef!: ElementRef;

	private friendsRuntime: FriendsRuntime;
	private modalViewComponent: ModalViewComponent;

	// I initialize the add-friend-view component.
	constructor(
		friendsRuntime: FriendsRuntime,
		modalViewComponent: ModalViewComponent
		) {

		this.friendsRuntime = friendsRuntime;
		this.modalViewComponent = modalViewComponent;

		this.form = {
			isBulkAction: false,
			name: ""
		};

	}

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

	// I close the modal window.
	public closeModal() : void {

		this.modalViewComponent.closeModal();

	}


	// I get called once after the view has been initialized.
	public ngAfterViewInit() : void {

		this.focusInput();

	}


	// I process the new friend form.
	public processForm() : void {

		if ( ! this.form.name.trim() ) {

			return;

		}

		this.friendsRuntime
			.addFriend( this.form.name )
			.then(
				( id ) => {

					if ( this.form.isBulkAction ) {
					
						this.form.name = "";
						this.focusInput();

					} else {

						this.closeModal();

					}

				},
				( error ) => {

					console.warn( "There was a problem adding the friend." );
					console.error( error );

				}
			)
		;

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I put the browser focus to the name input.
	private focusInput() : void {

		this.nameRef.nativeElement.focus();

	}

}

// Import the core angular services.
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

// Import the application components and services.
import { SimpleStore } from "./simple-store";

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

export interface Friend {
	id: number;
	name: string;
}

// NOTE: Internal state interface is never needed outside of runtime.
interface FriendsState {
	id: number;
	friends: Friend[];
}

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

@Injectable({
	providedIn: "root"
})
export class FriendsRuntime {

	private store: SimpleStore<FriendsState>;

	// I initialize the friends runtime.
	constructor() {

		// NOTE: For the store instance we are NOT USING DEPENDENCY-INJECTION. That's
		// because the store isn't really a "behavior" that we would ever want to swap -
		// it's just a slightly more complex data structure. In reality, it's just a
		// fancy hash/object that can also emit values.
		this.store = new SimpleStore({
			id: 0,
			friends: []
		});

		this.addFriend( "Sarah" );
		this.addFriend( "Joanna" );
		this.addFriend( "Kit" );

	}

	// ---
	// COMMAND METHODS.
	// ---

	// I add a new friend with the given name. Resolves to the ID of the newly-created
	// friend record.
	public async addFriend( name: string ) : Promise<number> {

		if ( ! name ) {

			throw( new Error( "Friend name required." ) );

		}

		var state = this.store.getSnapshot();

		var id = ( state.id + 1 );
		var friend = { id, name };
		var friends = state.friends.concat( friend ).sort( this.sortFriendsOperator );

		this.store.setState({ id, friends });

		return( friend.id );

	}


	// I remove the friend with the given id.
	public async removeFriend( id: number ) : Promise<void> {

		var state = this.store.getSnapshot();

		var friends = state.friends.filter(
			( friend ) => {

				return( friend.id !== id );

			}
		);

		this.store.setState({ friends });

	}

	// ---
	// QUERY METHODS.
	// ---

	// I return a stream for the friends.
	public getFriends() : Observable<Friend[]> {

		return( this.store.select( "friends" ) );

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I provide the sort-operator for friends.
	private sortFriendsOperator( a: Friend, b: Friend ) : number {

		var aName = a.name.toLowerCase();
		var bName = b.name.toLowerCase();

		return(
			( ( aName < bName ) && -1 ) ||
			( ( aName > bName ) && 1 ) ||
			0
		);

	}

}