now undo

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
-import {Child1Component} from "./child-1/child-1.component";
+import {Child1Component} from "./child/child-1/child-1.component";
-import {Child2Component} from "./child-2/child-2.component";
+import {Child2Component} from "./child/child-2/child-2.component";
-import {ParentComponent} from "./parent/parent.component";
+import {ParentComponent} from "./child/parent/parent.component";
 import {HotelsComponent} from "./hotel/hotels.component";
 
 @Component({

src/app/hotel/hotels.component.ts

@@ -1,5 +1,4 @@
 import {Component} from "@angular/core";
-import {NgFor, NgIf} from "@angular/common";
 import {HotelComponent} from "./hotel.component";
 import {Hotel} from "./hotel";
 import {FormsModule} from "@angular/forms";
@@ -10,24 +9,36 @@ import {FormsModule} from "@angular/forms";
     <form>
       <input name="search" [ngModel]="search" (ngModelChange)="searchEvent($event)">
     </form>
-    <ng-container *ngFor="let hotel of hotels">
+    @for (hotel of matchingHotels; track hotel.hotelId) {
-      <div *ngIf="search === '' || hotel.hotelName.toLowerCase().includes(search)">
         <app-hotel [hotel]="hotel"></app-hotel>
         <hr>
-      </div>
+    } @empty {
-    </ng-container>
+      <h1>no matching results for {{search}}</h1>
+    }
   `,
-  imports: [NgFor, NgIf, FormsModule, HotelComponent],
+  imports: [FormsModule, HotelComponent],
   selector: 'app-hotels'
 })
 export class HotelsComponent {
-  public search: string = ''
+  public search: string = '';
+
+  public matchingHotels: Hotel[] = [];
+
+  constructor() {
+    this.matchingHotels = this.hotels;
+  }
 
   public searchEvent(input: string) {
     this.search = input.toLowerCase();
+    this.matchingHotels = []
+    this.hotels.forEach((hotel: Hotel) => {
+      if (hotel.hotelName.toLowerCase().includes(this.search)) {
+          this.matchingHotels.push(hotel);
+      }
+    })
   }
 
-  hotels: Hotel[] = [
+  public hotels: Hotel[] = [
     {
       "hotelId": 1,
       "hotelName": "Buea süßes Leben",