diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 959eef8..5a0345d 100644 --- a/src/app/app.routes.ts +++ b/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: () => - import('./hotel-list/hotel-list.component').then( - (c) => c.HotelListComponent, - ), + component: HotelListComponent, }, { path: 'hotels/:id', diff --git a/src/app/hotel-list/hotel-list.component.html b/src/app/hotel-list/hotel-list.component.html index 91d0a92..e8af120 100644 --- a/src/app/hotel-list/hotel-list.component.html +++ b/src/app/hotel-list/hotel-list.component.html @@ -1,5 +1,7 @@
-

{{ "hello" | uppercase | text }}

+ + +

{{ "hello" | uppercase | text }}

CREATE NEW HOTEL @if (hotels[0].hotelName) { diff --git a/src/app/hotel-list/hotel-list.component.ts b/src/app/hotel-list/hotel-list.component.ts index d95fce8..a53b07b 100644 --- a/src/app/hotel-list/hotel-list.component.ts +++ b/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 = [{} 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>('api/hotels').subscribe((res) => { diff --git a/src/app/test2/test2.component.css b/src/app/test2/test2.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/test2/test2.component.html b/src/app/test2/test2.component.html new file mode 100644 index 0000000..0f8405e --- /dev/null +++ b/src/app/test2/test2.component.html @@ -0,0 +1,6 @@ + diff --git a/src/app/test2/test2.component.spec.ts b/src/app/test2/test2.component.spec.ts new file mode 100644 index 0000000..5d70ad0 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Test2Component] + }) + .compileComponents(); + + fixture = TestBed.createComponent(Test2Component); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/test2/test2.component.ts b/src/app/test2/test2.component.ts new file mode 100644 index 0000000..abbad52 --- /dev/null +++ b/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 { + +}