add service for layout context

apps/chill-viking-ng-libs/src/app/pages/home/home.component.html

@@ -1,39 +1,34 @@
-<cv-layout [data]="context">
-  <ng-template cvHeader let-header>
-    <ng-libs-header [context]="header" [subTitle$]="subTitle$"></ng-libs-header>
-  </ng-template>
-  <ng-libs-nav></ng-libs-nav>
-  <section id="welcome">
-    <div class="section-title">
-      <h1>Welcome 👋</h1>
-    </div>
-    <div class="cta">
-      <ng-libs-cta (clicked)="goToPackages()">
-        <span>View Packages</span>
-      </ng-libs-cta>
-      <ng-libs-cta (clicked)="goToRepository()" type="secondary">
-        <mat-icon>open_in_new</mat-icon>
-        <span>Visit Repository</span>
-      </ng-libs-cta>
-      <ng-libs-cta (clicked)="goToDiscussions()" type="secondary">
-        <mat-icon>open_in_new</mat-icon>
-        <span>Ask Us a Question</span>
-      </ng-libs-cta>
-    </div>
-    <div class="section-body">
-      <p>
-        Welcome to the Chill Viking <code>ng-libs</code> repository! Here,
-        you'll find a variety of high-quality npm packages for Angular projects.
-      </p>
-      <p>
-        Our packages are easy to use and constantly updated to ensure
-        compatibility with the latest version of Angular.
-      </p>
-      <p>
-        Explore our packages and see how they can benefit your projects. We hope
-        you'll join our community and stay up-to-date on the latest
-        developments.
-      </p>
-    </div>
-  </section>
-</cv-layout>
+<section id='welcome'>
+  <div class='section-title'>
+    <h1>Welcome 👋</h1>
+  </div>
+  <div class='cta'>
+    <ng-libs-cta (clicked)='goToPackages()'>
+      <mat-icon>output</mat-icon>
+      <span>View Packages</span>
+    </ng-libs-cta>
+    <ng-libs-cta (clicked)='goToRepository()' type='secondary'>
+      <mat-icon>open_in_new</mat-icon>
+      <span>Visit Repository</span>
+    </ng-libs-cta>
+    <ng-libs-cta (clicked)='goToDiscussions()' type='secondary'>
+      <mat-icon>open_in_new</mat-icon>
+      <span>Ask Us a Question</span>
+    </ng-libs-cta>
+  </div>
+  <div class='section-body'>
+    <p>
+      Welcome to the Chill Viking <code>ng-libs</code> repository! Here,
+      you'll find a variety of high-quality npm packages for Angular projects.
+    </p>
+    <p>
+      Our packages are easy to use and constantly updated to ensure
+      compatibility with the latest version of Angular.
+    </p>
+    <p>
+      Explore our packages and see how they can benefit your projects. We hope
+      you'll join our community and stay up-to-date on the latest
+      developments.
+    </p>
+  </div>
+</section>

apps/chill-viking-ng-libs/src/app/pages/home/home.component.spec.ts

@@ -1,8 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent, MockProvider } from 'ng-mocks';
-import { ChillVikingCallToActionComponent } from '../../features/chill-viking-call-to-action/chill-viking-call-to-action.component';
-import { ChillVikingHeaderComponent } from '../../features/chill-viking-header/chill-viking-header.component';
-import { ChillVikingNavigationComponent } from '../../features/chill-viking-navigation/chill-viking-navigation.component';
+import { MockProvider } from 'ng-mocks';
 import { WindowRouterService } from '../../services';
 
 import { HomeComponent } from './home.component';
@@ -14,12 +11,7 @@ describe('HomeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        HomeComponent,
-        MockComponent(ChillVikingHeaderComponent),
-        MockComponent(ChillVikingCallToActionComponent),
-        MockComponent(ChillVikingNavigationComponent),
-      ],
+      imports: [HomeComponent],
       providers: [MockProvider(WindowRouterService)],
     }).compileComponents();
 

apps/chill-viking-ng-libs/src/app/pages/home/home.component.ts

@@ -1,44 +1,25 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import { ChillVikingLayoutModule, LayoutContext } from '@chill-viking/layout';
-import { of } from 'rxjs';
-import { ChillVikingCallToActionComponent } from '../../features/chill-viking-call-to-action/chill-viking-call-to-action.component';
-import { ChillVikingHeaderComponent } from '../../features/chill-viking-header/chill-viking-header.component';
-import { ChillVikingNavigationComponent } from '../../features/chill-viking-navigation/chill-viking-navigation.component';
+import {
+  ChillVikingCallToActionComponent,
+} from '../../features/chill-viking-call-to-action/chill-viking-call-to-action.component';
 import { WindowRouterService } from '../../services';
 
 @Component({
   selector: 'ng-libs-home',
   standalone: true,
   imports: [
     CommonModule,
-    ChillVikingLayoutModule,
-    ChillVikingHeaderComponent,
     ChillVikingCallToActionComponent,
     MatIconModule,
-    ChillVikingNavigationComponent,
   ],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {
-  context: LayoutContext = {
-    header: {
-      title$: of('Chill Viking | ng-libs'),
-    },
-  };
-
-  subTitle$ = of(
-    'Elevate Your Angular Development with Our Handy npm Packages',
-  );
-
   constructor(private _router: WindowRouterService) {}
 
   goToPackages(): void {

apps/chill-viking-ng-libs/src/app/pages/packages/packages.component.html

@@ -1,7 +1 @@
-<cv-layout [data]="layoutContext">
-  <ng-template cvHeader let-header>
-    <ng-libs-header [context]="header" [subTitle$]="subTitle$"></ng-libs-header>
-  </ng-template>
-  <ng-libs-nav></ng-libs-nav>
-  <ng-libs-table [data]="{ items: packages }"></ng-libs-table>
-</cv-layout>
+<ng-libs-table [data]='{ items: packages }'></ng-libs-table>

apps/chill-viking-ng-libs/src/app/pages/packages/packages.component.spec.ts

@@ -1,6 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent } from 'ng-mocks';
-import { ChillVikingNavigationComponent } from '../../features/chill-viking-navigation/chill-viking-navigation.component';
 
 import { PackagesComponent } from './packages.component';
 
@@ -12,7 +10,6 @@ describe('PackagesComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         PackagesComponent,
-        MockComponent(ChillVikingNavigationComponent),
       ],
     }).compileComponents();
 

apps/chill-viking-ng-libs/src/app/pages/packages/packages.component.ts

@@ -1,23 +1,12 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ChillVikingLayoutModule, LayoutContext } from '@chill-viking/layout';
-import { of } from 'rxjs';
-import { ChillVikingHeaderComponent } from '../../features/chill-viking-header/chill-viking-header.component';
-import { ChillVikingNavigationComponent } from '../../features/chill-viking-navigation/chill-viking-navigation.component';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { ChillVikingTableComponent } from '../../features/chill-viking-table/chill-viking-table.component';
 
 @Component({
   standalone: true,
   imports: [
     CommonModule,
     ChillVikingTableComponent,
-    ChillVikingLayoutModule,
-    ChillVikingHeaderComponent,
-    ChillVikingNavigationComponent,
   ],
   templateUrl: './packages.component.html',
   styleUrls: ['./packages.component.scss'],
@@ -34,12 +23,4 @@ export class PackagesComponent {
       ].join(' '),
     },
   ];
-
-  layoutContext: LayoutContext = {
-    header: {
-      title$: of('Chill Viking | ng-libs | Packages'),
-    },
-  };
-
-  subTitle$ = of('Directory of available packages');
 }

apps/chill-viking-ng-libs/src/app/root.component.spec.ts

@@ -1,14 +1,26 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RootComponent } from './root.component';
+import { PageMetaDataService } from './services/page-meta-data.service';
+import { MockProvider } from 'ng-mocks';
+import { of } from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('RootComponent', () => {
   let component: RootComponent;
   let fixture: ComponentFixture<RootComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RootComponent],
+      providers: [
+        MockProvider(PageMetaDataService, {
+          subTitle$: of('sub-title'),
+        }),
+      ],
+      imports: [
+        RouterTestingModule,
+        RootComponent,
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RootComponent);

apps/chill-viking-ng-libs/src/app/root.component.ts

@@ -1,18 +1,37 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ChillVikingLayoutModule } from '@chill-viking/layout';
+import { ChillVikingHeaderComponent } from './features/chill-viking-header/chill-viking-header.component';
+import { PageMetaDataService } from './services/page-meta-data.service';
+import { ChillVikingNavigationComponent } from './features/chill-viking-navigation/chill-viking-navigation.component';
 
 @Component({
   standalone: true,
   selector: 'ng-libs-root',
-  imports: [CommonModule, RouterOutlet],
-  template: ` <router-outlet></router-outlet> `,
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    ChillVikingLayoutModule,
+    ChillVikingHeaderComponent,
+    ChillVikingNavigationComponent,
+  ],
+  template: `
+    <cv-layout>
+      <ng-template cvHeader let-header>
+        <ng-libs-header [context]='header' [subTitle$]='subTitle$'></ng-libs-header>
+      </ng-template>
+      <ng-libs-nav></ng-libs-nav>
+      <router-outlet></router-outlet>
+    </cv-layout>
+  `,
   styles: [],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class RootComponent {}
+export class RootComponent {
+  subTitle$ = this._pageMetaDataSvc.subTitle$;
+
+  constructor(private _pageMetaDataSvc: PageMetaDataService) {
+  }
+}

apps/chill-viking-ng-libs/src/app/routes.ts

@@ -3,8 +3,9 @@ import { RouterFeatures, Routes } from '@angular/router';
 export const rootRoutes: Routes = [
   {
     path: 'home',
-    title: 'Home',
+    title: 'ng-libs | Home',
     data: {
+      subTitle: 'Elevate Your Angular Development with Our Handy npm Packages',
       metaTags: {
         description: [
           'High-quality npm packages for Angular projects.',
@@ -17,8 +18,9 @@ export const rootRoutes: Routes = [
   },
   {
     path: 'packages',
-    title: 'Packages',
+    title: 'ng-libs | Packages',
     data: {
+      subTitle: 'Directory of available packages',
       metaTags: {
         description: [
           'A directory of high-quality npm packages for Angular projects.',