feat(launchpad): support routerLink for launchpad apps

Author: prasepic

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--mobile.yaml

@@ -15,5 +15,5 @@
 - link "Rocket":
   - /url: .
 - link "Statistics":
-  - /url: .
+  - /url: "#/viewer/viewer/stats"
 - button "Close launchpad"

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad--new-favorite.yaml

@@ -7,6 +7,8 @@
 - text: Favorite apps
 - link "Fischbach":
   - /url: .
+- link "Rocket":
+  - /url: .
 - button "Show less"
 - link "Assets":
   - /url: .
@@ -15,5 +17,5 @@
 - link "Rocket":
   - /url: .
 - link "Statistics":
-  - /url: .
+  - /url: "#/viewer/viewer/stats"
 - button "Close launchpad"

playwright/snapshots/si-launchpad.spec.ts-snapshots/si-application-header--si-launchpad.yaml

@@ -15,5 +15,5 @@
 - link "Rocket":
   - /url: .
 - link "Statistics":
-  - /url: .
+  - /url: "#/viewer/viewer/stats"
 - button "Close launchpad"

projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html

@@ -1,3 +1,5 @@
+<!-- eslint-disable @angular-eslint/template/no-any -->
+<!-- temporary until old primary-navbar is removed -->
 <div
   class="app-switcher pt-8 g-5 g-sm-9 container-fluid"
   cdkTrapFocus
@@ -21,24 +23,51 @@
           }
           <div class="mt-4 d-flex flex-wrap gap-4">
             @for (app of category.apps; track app) {
-              <!-- eslint-disable @angular-eslint/template/no-any -->
-              <!-- temporary until old primary-navbar is removed -->
-              <a
-                si-launchpad-app
-                [enableFavoriteToggle]="enableFavorites() && !$any(app)._noFavorite"
-                [favorite]="!!app.favorite"
-                [href]="app.href"
-                [target]="app.target ?? ''"
-                [active]="app.active"
-                [external]="app.external"
-                [iconUrl]="app.iconUrl"
-                [iconClass]="app.iconClass"
-                (favoriteChange)="toggleFavorite(app, $event)"
-              >
-                <span app-name>{{ app.name | translate }}</span>
-                <span app-systemName>{{ app.systemName | translate }}</span>
-              </a>
-              <!-- eslint-enable @angular-eslint/template/no-any -->
+              @switch (app.type) {
+                @case ('router-link') {
+                  <a
+                    si-launchpad-app
+                    routerLinkActive="active"
+                    [routerLinkActiveOptions]="app.activeMatchOptions ?? { exact: false }"
+                    [enableFavoriteToggle]="enableFavorites() && !$any(app)._noFavorite"
+                    [external]="app.external"
+                    [iconUrl]="app.iconUrl"
+                    [iconClass]="app.iconClass"
+                    [favorite]="!!app.favorite"
+                    [routerLink]="app.routerLink"
+                    [queryParams]="app.extras?.queryParams"
+                    [queryParamsHandling]="app.extras?.queryParamsHandling"
+                    [fragment]="app.extras?.fragment"
+                    [state]="app.extras?.state"
+                    [relativeTo]="app.extras?.relativeTo ?? this.activatedRoute"
+                    [preserveFragment]="app.extras?.preserveFragment"
+                    [skipLocationChange]="app.extras?.skipLocationChange"
+                    [replaceUrl]="app.extras?.replaceUrl"
+                    (favoriteChange)="toggleFavorite(app, $event)"
+                  >
+                    <span app-name>{{ app.name | translate }}</span>
+                    <span app-systemName>{{ app.systemName | translate }}</span>
+                  </a>
+                }
+                @default {
+                  <!--fallback for existing apps that do not have a type defined -->
+                  <a
+                    si-launchpad-app
+                    [enableFavoriteToggle]="enableFavorites() && !$any(app)._noFavorite"
+                    [favorite]="!!app.favorite"
+                    [href]="app.href"
+                    [target]="app.target ?? ''"
+                    [active]="app.active"
+                    [external]="app.external"
+                    [iconUrl]="app.iconUrl"
+                    [iconClass]="app.iconClass"
+                    (favoriteChange)="toggleFavorite(app, $event)"
+                  >
+                    <span app-name>{{ app.name | translate }}</span>
+                    <span app-systemName>{{ app.systemName | translate }}</span>
+                  </a>
+                }
+              }
             }
           </div>
         </div>

projects/element-ng/application-header/launchpad/si-launchpad-factory.component.ts

@@ -13,6 +13,7 @@ import {
   input,
   output
 } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
 import {
   addIcons,
   elementCancel,
@@ -39,7 +40,9 @@ export interface FavoriteChangeEvent {
     SiLinkModule,
     SiTranslatePipe,
     SiLaunchpadAppComponent,
-    SiIconNextComponent
+    SiIconNextComponent,
+    RouterLinkActive,
+    RouterLink
   ],
   templateUrl: './si-launchpad-factory.component.html',
   styleUrl: './si-launchpad-factory.component.scss',
@@ -144,6 +147,7 @@ export class SiLaunchpadFactoryComponent {
   );
   protected readonly hasFavorites = computed(() => this.favorites().length > 0);
   protected readonly icons = addIcons({ elementDown2, elementCancel });
+  protected readonly activatedRoute = inject(ActivatedRoute, { optional: true });
   private header = inject(SiApplicationHeaderComponent);
 
   protected closeLaunchpad(): void {

projects/element-ng/application-header/launchpad/si-launchpad.model.ts

@@ -2,34 +2,52 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+import { IsActiveMatchOptions, NavigationExtras } from '@angular/router';
 import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
 /** Represents an app to be shown in the launchpad. */
-export interface App {
-  /** Name of the app */
-  name: TranslatableString;
-  /** Name of the related system. */
-  systemName?: TranslatableString;
+export interface AppLink extends AppBase {
+  /** The type of the app. can be either 'link' or 'router-link' */
+  type?: 'link';
   /** URL destination of the app. */
   href: string;
   /** Value for the anchor target attribute. */
   target?: string;
-  /** Icon of the app. */
-  iconUrl?: string;
-  /** CSS class to apply, which should render the icon. Typically, "element-*". */
-  iconClass?: string;
-  /** Whether the app is marked as favorite.  */
-  favorite?: boolean;
-  /** Whether the app should be marked as external. */
-  external?: boolean;
   /** Whether the app is the currently running app. */
   active?: boolean;
 }
 
+export interface AppRouterLink extends AppBase {
+  type: 'router-link';
+  /** Link for the angular router. Accepts the same values as {@link https://angular.dev/api/router/RouterLink}. */
+  routerLink: string | any[];
+  /** Navigation extras that are passed to the {@link https://angular.dev/api/router/NavigationExtras}. */
+  extras?: NavigationExtras;
+  /** Active match options for routerLinkActive {@link https://angular.dev/api/router/IsActiveMatchOptions}.*/
+  activeMatchOptions?: { exact: boolean } | IsActiveMatchOptions;
+}
+
 /** Represents a categories in the launchpad. */
 export interface AppCategory {
   /** The name of the app category. */
   name?: TranslatableString;
   /** The apps to show under this category.  */
   apps: App[];
 }
+
+export interface AppBase {
+  /** Name of the app */
+  name: TranslatableString;
+  /** Name of the related system. */
+  systemName?: TranslatableString;
+  /** Icon of the app. */
+  iconUrl?: string;
+  /** CSS class to apply, which should render the icon. Typically, "element-*". */
+  iconClass?: string;
+  /** Whether the app is marked as favorite.  */
+  favorite?: boolean;
+  /** Whether the app should be marked as external. */
+  external?: boolean;
+}
+
+export type App = AppLink | AppRouterLink;

src/app/examples/si-application-header/si-launchpad.ts

@@ -45,7 +45,8 @@ export class SampleComponent {
     {
       name: 'Statistics',
       iconUrl: './assets/app-icons/statistics.svg',
-      href: '.'
+      type: 'router-link',
+      routerLink: 'stats'
     }
   ];