feat: minimal app

apps/minimal/src/app/app.component.html

@@ -1,2 +1,15 @@
-<h1>Welcome minimal</h1>
+<h1>xng-breadcrumb</h1>
+<h2>Angular version {{ name }}</h2>
+
+<div *ngIf="showBreadcrumbs">
+  <xng-breadcrumb class="auto-generated-true"></xng-breadcrumb>
+
+  <h3>Auto generated: false</h3>
+  <xng-breadcrumb [autoGenerate]="false" class="auto-generated-false"></xng-breadcrumb>
+</div>
+
 <router-outlet></router-outlet>
+
+<button (click)="toggleBreadcrumbVisibility()">Toggle Breadcrumb Visibility</button>
+
+<button (click)="setOrderItemsLabel()">Set Order Items Label</button>

apps/minimal/src/app/app.component.ts

@@ -1,11 +1,29 @@
-import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Component, VERSION } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService } from 'xng-breadcrumb';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, BreadcrumbComponent, BreadcrumbItemDirective, CommonModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: ``,
 })
-export class AppComponent {}
+export class AppComponent {
+  showBreadcrumbs = false;
+
+  constructor(router: Router, private breadcrumbService: BreadcrumbService) {
+    router.routeReuseStrategy.shouldReuseRoute = () => false;
+  }
+
+  toggleBreadcrumbVisibility() {
+    this.showBreadcrumbs = !this.showBreadcrumbs;
+  }
+
+  setOrderItemsLabel() {
+    this.breadcrumbService.set('@orderItems', { label: 'My Order Items' });
+  }
+
+  name = 'Angular ' + VERSION.major;
+}

apps/minimal/src/app/app.routes.ts

@@ -1,3 +1,64 @@
 import { Route } from '@angular/router';
+import { PageComponent } from './page/page.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'homepage',
+    pathMatch: 'full',
+  },
+  {
+    path: 'homepage',
+    component: PageComponent,
+    data: {
+      breadcrumb: 'Dashboard',
+    },
+  },
+  {
+    path: 'company',
+    data: { breadcrumb: 'Companies' },
+    children: [
+      { path: '', component: PageComponent },
+      {
+        path: ':companyId',
+        data: { breadcrumb: 'Company Name' },
+        children: [
+          { path: '', component: PageComponent },
+          {
+            path: 'order',
+            data: { breadcrumb: 'Orders' },
+            children: [
+              { path: '', component: PageComponent },
+              {
+                path: ':orderId',
+                data: { breadcrumb: 'Order Details' },
+                children: [
+                  { path: '', component: PageComponent },
+                  {
+                    path: 'items',
+                    component: PageComponent,
+                    data: {
+                      breadcrumb: {
+                        alias: 'orderItems',
+                      },
+                    },
+                  },
+                  {
+                    path: 'payment',
+                    component: PageComponent,
+                    data: { breadcrumb: 'Payment Info' },
+                  },
+                  {
+                    path: 'delivery',
+                    component: PageComponent,
+                    data: { breadcrumb: 'Delivery Details' },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

apps/minimal/src/app/page/page.component.html

@@ -0,0 +1,30 @@
+<ul>
+  <li>
+    <a [routerLink]="['/company']"> Company list </a>
+    <ul>
+      <li>
+        <a [routerLink]="['/company/1']"> Company </a>
+        <ul></ul>
+      </li>
+      <li>
+        <a [routerLink]="['/company/1/order']"> Order list </a>
+        <ul>
+          <li>
+            <a [routerLink]="['/company/1/order/2']"> Order Details </a>
+            <ul>
+              <li>
+                <a [routerLink]="['/company/1/order/2/items']"> Order Items </a>
+              </li>
+              <li>
+                <a [routerLink]="['/company/1/order/2/payment']"> Order Payment Info </a>
+              </li>
+              <li>
+                <a [routerLink]="['/company/1/order/2/delivery']"> Order Delivery Info </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>

apps/minimal/src/app/page/page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-page',
+  templateUrl: './page.component.html',
+  standalone: true,
+  imports: [RouterLink],
+})
+export class PageComponent {}

apps/minimal/tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,