Split Screen Demo

apps/isa-app/src/app/app-routing.module.ts

@@ -43,6 +43,10 @@ const routes: Routes = [
             path: 'kunde',
             component: MainComponent,
             children: [
+              {
+                path: 'dashboard',
+                loadChildren: () => import('@page/split-screen-demo').then((m) => m.SplitScreenDemoModule),
+              },
               {
                 path: 'dashboard',
                 loadChildren: () => import('@page/dashboard').then((m) => m.DashboardModule),

apps/page/split-screen-demo/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/page/remission",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/page/split-screen-demo/src/lib/navigation.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+
+@Injectable({ providedIn: 'root' })
+export class NavigationService {
+  constructor(private _router: Router) {}
+
+  private _createNavigationFn(commands: any[], extras?: NavigationExtras): () => Promise<boolean> {
+    return () => this._router.navigate(commands, extras);
+  }
+
+  primary1Route(): { commands: any[]; extras?: NavigationExtras; navigate: () => Promise<boolean> } {
+    const commands = ['/kunde', 'dashboard', { outlets: { primary: ['primary1'] } }];
+    return { commands, navigate: this._createNavigationFn(commands) };
+  }
+
+  primary2Route(): { commands: any[]; extras?: NavigationExtras; navigate: () => Promise<boolean> } {
+    const commands = ['/kunde', 'dashboard', { outlets: { primary: ['primary2'] } }];
+    return { commands, navigate: this._createNavigationFn(commands) };
+  }
+
+  side1Route(): { commands: any[]; extras?: NavigationExtras; navigate: () => Promise<boolean> } {
+    const commands = ['/kunde', 'dashboard', { outlets: { side: ['side1'] } }];
+    return { commands, navigate: this._createNavigationFn(commands) };
+  }
+
+  side2Route(): { commands: any[]; extras?: NavigationExtras; navigate: () => Promise<boolean> } {
+    const commands = ['/kunde', 'dashboard', { outlets: { side: ['side2'] } }];
+    return { commands, navigate: this._createNavigationFn(commands) };
+  }
+
+  clearSideRoute(): { commands: any[]; extras?: NavigationExtras; navigate: () => Promise<boolean> } {
+    const commands = ['/kunde', 'dashboard', { outlets: { side: null } }];
+    return { commands, navigate: this._createNavigationFn(commands) };
+  }
+}

apps/page/split-screen-demo/src/lib/primary-1/primary-1.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply block bg-red-500;
+}

apps/page/split-screen-demo/src/lib/primary-1/primary-1.component.html

@@ -0,0 +1,17 @@
+<h1>Primary 1</h1>
+
+<a
+  *ngIf="navigationService.primary2Route(); let primary2Route"
+  [routerLink]="primary2Route.commands"
+  [queryParams]="primary2Route.extras?.queryParams"
+>
+  Primary 2
+</a>
+
+<a *ngIf="navigationService.side1Route(); let side1Route" [routerLink]="side1Route.commands" [queryParams]="side1Route.extras?.queryParams">
+  Side 1
+</a>
+
+<a *ngIf="navigationService.side2Route(); let side2Route" [routerLink]="side2Route.commands" [queryParams]="side2Route.extras?.queryParams">
+  Side 2
+</a>

apps/page/split-screen-demo/src/lib/primary-1/primary-1.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NavigationService } from '../navigation.service';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'page-primary-1',
+  templateUrl: 'primary-1.component.html',
+  styleUrls: ['primary-1.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-primary-1' },
+  standalone: true,
+  imports: [RouterLink, NgIf],
+})
+export class Primary1Component {
+  constructor(public navigationService: NavigationService) {}
+}

apps/page/split-screen-demo/src/lib/primary-2/primary-2.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply block bg-blue-500;
+}

apps/page/split-screen-demo/src/lib/primary-2/primary-2.component.html

@@ -0,0 +1,17 @@
+<h1>Primary 2</h1>
+
+<a
+  *ngIf="navigationService.primary1Route(); let primary1Route"
+  [routerLink]="primary1Route.commands"
+  [queryParams]="primary1Route.extras?.queryParams"
+>
+  Primary 1
+</a>
+
+<a *ngIf="navigationService.side1Route(); let side1Route" [routerLink]="side1Route.commands" [queryParams]="side1Route.extras?.queryParams">
+  Side 1
+</a>
+
+<a *ngIf="navigationService.side2Route(); let side2Route" [routerLink]="side2Route.commands" [queryParams]="side2Route.extras?.queryParams">
+  Side 2
+</a>

apps/page/split-screen-demo/src/lib/primary-2/primary-2.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NavigationService } from '../navigation.service';
+import { NgIf } from '@angular/common';
+
+@Component({
+  selector: 'page-primary-2',
+  templateUrl: 'primary-2.component.html',
+  styleUrls: ['primary-2.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-primary-2' },
+  standalone: true,
+  imports: [RouterLink, NgIf],
+})
+export class Primary2Component {
+  constructor(public navigationService: NavigationService) {}
+}

apps/page/split-screen-demo/src/lib/side-1/side-1.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply block bg-purple-500;
+}

apps/page/split-screen-demo/src/lib/side-1/side-1.component.html

@@ -0,0 +1,24 @@
+<h1>Side 1</h1>
+
+<a
+  *ngIf="navigationService.primary1Route(); let primary1Route"
+  [routerLink]="primary1Route.commands"
+  [queryParams]="primary1Route.extras?.queryParams"
+>
+  Primary 1
+</a>
+
+<a
+  *ngIf="navigationService.primary2Route(); let primary2Route"
+  [routerLink]="primary2Route.commands"
+  [queryParams]="primary2Route.extras?.queryParams"
+>
+  Primary 2
+</a>
+
+<a
+  *ngIf="navigationService.clearSideRoute(); let clearSideRoute"
+  [routerLink]="clearSideRoute.commands"
+  [queryParams]="clearSideRoute.extras?.queryParams"
+  >Close Side</a
+>

apps/page/split-screen-demo/src/lib/side-1/side-1.component.ts

@@ -0,0 +1,17 @@
+import { NgIf } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NavigationService } from '../navigation.service';
+
+@Component({
+  selector: 'page-side-1',
+  templateUrl: 'side-1.component.html',
+  styleUrls: ['side-1.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-side-1' },
+  standalone: true,
+  imports: [RouterLink, NgIf],
+})
+export class Side1Component {
+  constructor(public navigationService: NavigationService) {}
+}

apps/page/split-screen-demo/src/lib/side-2/side-2.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply block bg-green-500;
+}

apps/page/split-screen-demo/src/lib/side-2/side-2.component.html

@@ -0,0 +1,24 @@
+<h1>Side 2</h1>
+
+<a
+  *ngIf="navigationService.primary1Route(); let primary1Route"
+  [routerLink]="primary1Route.commands"
+  [queryParams]="primary1Route.extras?.queryParams"
+>
+  Primary 1
+</a>
+
+<a
+  *ngIf="navigationService.primary2Route(); let primary2Route"
+  [routerLink]="primary2Route.commands"
+  [queryParams]="primary2Route.extras?.queryParams"
+>
+  Primary 2
+</a>
+
+<a
+  *ngIf="navigationService.clearSideRoute(); let clearSideRoute"
+  [routerLink]="clearSideRoute.commands"
+  [queryParams]="clearSideRoute.extras?.queryParams"
+  >Close Side</a
+>

apps/page/split-screen-demo/src/lib/side-2/side-2.component.ts

@@ -0,0 +1,17 @@
+import { NgIf } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NavigationService } from '../navigation.service';
+
+@Component({
+  selector: 'page-side-2',
+  templateUrl: 'side-2.component.html',
+  styleUrls: ['side-2.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-side-2' },
+  standalone: true,
+  imports: [RouterLink, NgIf],
+})
+export class Side2Component {
+  constructor(public navigationService: NavigationService) {}
+}

apps/page/split-screen-demo/src/lib/split-screen-demo.component.css

@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-split-screen gap-split-screen h-split-screen-tablet max-h-split-screen-tablet desktop-small:h-split-screen-desktop desktop-small:max-h-split-screen-desktop;
+}

apps/page/split-screen-demo/src/lib/split-screen-demo.component.html

@@ -0,0 +1,6 @@
+<div [class.hidden]="sideOutletNotActivated" class="hidden desktop-large:block">
+  <router-outlet #sideOutlet="outlet" name="side"></router-outlet>
+</div>
+<div [class.col-span-2]="sideOutletNotActivated" class="col-span-2 desktop-large:col-span-1">
+  <router-outlet #primaryOutlet="outlet"></router-outlet>
+</div>

apps/page/split-screen-demo/src/lib/split-screen-demo.component.ts

@@ -0,0 +1,33 @@
+import { JsonPipe, NgIf } from '@angular/common';
+import { Component, ChangeDetectionStrategy, ViewChild, OnInit } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'page-split-screen-demo',
+  templateUrl: 'split-screen-demo.component.html',
+  styleUrls: ['split-screen-demo.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'page-split-screen-demo' },
+  standalone: true,
+  imports: [RouterOutlet, JsonPipe, NgIf],
+})
+export class SplitScreenDemoComponent implements OnInit {
+  @ViewChild('sideOutlet', { static: true, read: RouterOutlet })
+  sideOutlet: RouterOutlet;
+
+  @ViewChild('primaryOutlet', { static: true, read: RouterOutlet })
+  primaryOutlet: RouterOutlet;
+
+  get sideOutletNotActivated() {
+    return !(this.sideOutlet && this.sideOutlet.isActivated);
+  }
+
+  constructor() {}
+
+  ngOnInit() {
+    console.log('SplitScreenDemoComponent ngOnInit', {
+      sideOutlet: this.sideOutlet,
+      primaryOutlet: this.primaryOutlet,
+    });
+  }
+}

apps/page/split-screen-demo/src/lib/split-screen-demo.routes.ts

@@ -0,0 +1,26 @@
+import { RouterModule, Routes } from '@angular/router';
+import { SplitScreenDemoComponent } from './split-screen-demo.component';
+import { Primary1Component } from './primary-1/primary-1.component';
+import { Primary2Component } from './primary-2/primary-2.component';
+import { Side1Component } from './side-1/side-1.component';
+import { Side2Component } from './side-2/side-2.component';
+import { NgModule } from '@angular/core';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: SplitScreenDemoComponent,
+    children: [
+      { path: 'primary1', component: Primary1Component },
+      { path: 'primary2', component: Primary2Component },
+      { path: 'side1', component: Side1Component, outlet: 'side' },
+      { path: 'side2', component: Side2Component, outlet: 'side' },
+      { path: '', redirectTo: 'primary1', pathMatch: 'full' },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class SplitScreenDemoModule {}

apps/page/split-screen-demo/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/split-screen-demo.routes';