init

angular.json

@@ -103,5 +103,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "fd52d39e-ceaa-487c-a11f-527e9888d44f"
   }
 }

src/app/app.routes.ts

 import { Routes } from '@angular/router';
+import { ServicesComponent } from './services/services.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: 'services/:id',
+    component: ServicesComponent
+    // loadComponent: () => import('./offerings/index')
+    //   .then(x => x.ServicesComponent),
+  }
+];

src/app/components.ts

+import { Component } from "@angular/core";
+
+export interface Service {
+  id: number;
+  title: string;
+  description: string;
+}
+
+export enum ServiceTypes {
+  consultancy, // 0
+  trainings, // 1
+  engineering, // 2
+}
+
+@Component({
+  selector: 'consultancy',
+  template: `
+    This is the leaf content
+  `,
+})
+export class ConsultancyComponent {}
+@Component({
+  selector: 'engineering',
+  template: `
+    <p>This is the start of the outer container</p>
+  `,
+})
+export class SoftwareEngineeringComponent {}
+
+@Component({
+  selector: 'trainings',
+  template: `
+    <p>This is the start of the outer container</p>
+  `,
+})
+export class TrainingsComponent {}

src/app/directives/component-host.directive.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { ComponentHostDirective } from './component-host.directive';
+
+describe('Directive: ComponentHost', () => {
+  it('should create an instance', () => {
+    const directive = new ComponentHostDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/component-host.directive.ts

+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[appComponentHost]',
+  standalone: true,
+})
+export class ComponentHostDirective {
+
+  constructor(public readonly viewContainerRef: ViewContainerRef) {}
+
+}

src/app/services-factory.ts

+import {
+  ConsultancyComponent,
+  ServiceTypes,
+  SoftwareEngineeringComponent,
+  TrainingsComponent,
+} from './components';
+import { Type } from '@angular/core';
+
+export type ServiceComponentType = ConsultancyComponent
+  | TrainingsComponent
+  | SoftwareEngineeringComponent;
+
+export const servicesComponentFactory:
+  Record<ServiceTypes, Type<ServiceComponentType>>
+  = {
+  [ServiceTypes.consultancy]: ConsultancyComponent,
+  [ServiceTypes.trainings]: TrainingsComponent,
+  [ServiceTypes.engineering]: SoftwareEngineeringComponent,
+};

src/app/services/services.component.html

+<ng-template appComponentHost />

src/app/services/services.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/services/services.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subject, from, switchMap, takeUntil, tap } from 'rxjs';
+import { ComponentHostDirective } from '../directives/component-host.directive';
+import { ServiceComponentType, servicesComponentFactory } from '../services-factory';
+import { Service, ServiceTypes } from '../components';
+
+@Component({
+  selector: 'app-services',
+  standalone: true,
+  imports: [ComponentHostDirective],
+  templateUrl: './services.component.html',
+  styleUrls: ['./services.component.scss'],
+})
+export class ServicesComponent implements OnInit {
+  @ViewChild(ComponentHostDirective, { static: true }) componentHost!: ComponentHostDirective;
+
+  constructor(private readonly route: ActivatedRoute) { }
+
+  destroy: Subject<void> = new Subject<void>();
+
+  ngOnInit(): void { // subscribing to the stream when component has been created
+    this.route.params
+      .pipe(
+        // switchMap(({ id }: Params) => from([]))),
+        // tap((service: Service) => this.loadComponent(service)),
+        takeUntil(this.destroy.asObservable()),
+      )
+      .subscribe(result => {
+        this.loadComponent({
+          id: result['id'],
+          title: "string",
+          description: "string"
+        })
+      });
+
+  }
+
+  loadComponent(service: Service): void {
+    const { viewContainerRef }: ComponentHostDirective = this.componentHost;
+    viewContainerRef.clear();
+
+    const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
+      servicesComponentFactory[service.id as ServiceTypes]
+    );
+    // instance.data = service;
+  }
+
+  ngOnDestroy(): void {
+    this.destroy.next();
+  }
+}