feat: add Test2 component with dynamic loading feature

src/app/app.routes.ts

@@ -1,14 +1,12 @@
 import { Routes } from '@angular/router';
+import { HotelListComponent } from './hotel-list/hotel-list.component';
 import { TestComponent } from './test/test.component';
 import { NewHotelComponent } from './new-hotel/new-hotel.component';
 
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () =>
+    component: HotelListComponent,
-      import('./hotel-list/hotel-list.component').then(
-        (c) => c.HotelListComponent,
-      ),
   },
   {
     path: 'hotels/:id',

src/app/hotel-list/hotel-list.component.html

@@ -1,5 +1,7 @@
 <div class="container p-4 mx-auto max-w-4xl">
-  <h1>{{ "hello" | uppercase | text }}</h1>
+  <button (click)="loadTest2()">Load Test2</button>
+  <ng-container #test2></ng-container>
+  <h1 class="mt-6">{{ "hello" | uppercase | text }}</h1>
   <a class="submit-button" routerLink="/new">CREATE NEW HOTEL</a>
   <app-search [(input)]="search"></app-search>
   @if (hotels[0].hotelName) {

src/app/hotel-list/hotel-list.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, NgFor, NgIf, UpperCasePipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ViewChild, ViewContainerRef } from '@angular/core';
 import { TextPipe } from '../../text.pipe';
 import { SearchComponent } from '../Search/search.component';
 import { HotelService } from '../Parent/services/hotel.service';
@@ -35,7 +35,18 @@ export class HotelListComponent {
   public response: any = null;
   public hotels: Array<Hotel> = [{} as Hotel];
 
-  constructor(private http: HttpClient) {}
+  @ViewChild('test2', { read: ViewContainerRef })
+  private test2ViewContainerRef!: ViewContainerRef;
+
+  constructor(private http: HttpClient) { }
+
+  async loadTest2() {
+    for (let i = 0; i < 1; i++) {
+      const { Test2Component } = await import('../test2/test2.component');
+
+      this.test2ViewContainerRef.createComponent(Test2Component);
+    }
+  }
 
   ngOnInit() {
     this.http.get<Array<Hotel>>('api/hotels').subscribe((res) => {

src/app/test2/test2.component.html

@@ -0,0 +1,6 @@
+<iframe
+  src="https://funhtml5games.com?embed=flappy"
+  style="width: 800px; height: 520px; border: none"
+  frameborder="0"
+  scrolling="no"
+></iframe>

src/app/test2/test2.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Test2Component } from './test2.component';
+
+describe('Test2Component', () => {
+  let component: Test2Component;
+  let fixture: ComponentFixture<Test2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Test2Component]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Test2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/test2/test2.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test2',
+  imports: [],
+  templateUrl: './test2.component.html',
+  styleUrl: './test2.component.css'
+})
+export class Test2Component {
+
+}