add simple template

Author: manfredsteyer

src/app/app.component.html

@@ -1,17 +1,13 @@
 <div class="wrapper">
-
   <div class="sidebar" data-color="white" data-active-color="danger">
-      <app-sidebar-cmp></app-sidebar-cmp>
+    <app-sidebar-cmp></app-sidebar-cmp>
   </div>
 
   <div class="main-panel">
-      <app-navbar-cmp></app-navbar-cmp>
+    <app-navbar-cmp></app-navbar-cmp>
 
-      <div class="content">
-           
-          <h1>{{title}}</h1>
-          
-      </div>
+    <div class="content">
+      <h1>{{ title }}</h1>
+    </div>
   </div>
-
 </div>

src/app/app.component.ts

@@ -1,16 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { FlightSearchComponent } from './flight-search/flight-search.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 
 @Component({
   standalone: true,
-  imports: [
-    SidebarComponent,
-    NavbarComponent,
-  ],
+  imports: [SidebarComponent, NavbarComponent, FlightSearchComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'] 
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'Hello World!';

src/app/flight-search/flight-search.component.html

@@ -1 +1,45 @@
-<p>flight-search works!</p>
+<div class="header">
+  <h2 class="title">Flight Search</h2>
+</div>
+
+<form>
+  <div class="form-group">
+    <label>From:</label>
+    <input name="from" class="form-control" />
+  </div>
+  <div class="form-group">
+    <label>To:</label>
+    <input name="to" class="form-control" />
+  </div>
+
+  <div class="form-group">
+    <button class="btn btn-default">Search</button>
+  </div>
+</form>
+
+<table class="table table-condensed">
+  <thead>
+    <tr>
+      <th>Id</th>
+      <th>From</th>
+      <th>To</th>
+      <th>Date</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>
+        <a>Select</a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<div *ngIf="selectedFlight">
+  <pre>{{ selectedFlight | json }}</pre>
+</div>

src/app/flight-search/flight-search.component.ts

@@ -11,17 +11,15 @@ import { Flight } from '../model/flight';
   styleUrls: ['./flight-search.component.css'],
 })
 export class FlightSearchComponent {
-  from = '';
-  to = '';
+  from = 'London';
+  to = 'Paris';
   flights: Array<Flight> = [];
   selectedFlight: Flight | undefined;
 
   private http = inject(HttpClient);
 
-  ngOnInit(): void {}
-
   search(): void {
-    const url = 'http://www.angular.at/api/flight';
+    const url = 'https://demo.angulararchitects.io/api/flight';
 
     const headers = {
       Accept: 'application/json',

src/main.ts

@@ -1,6 +1,7 @@
+import { provideHttpClient } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
-  providers: [],
+  providers: [provideHttpClient()],
 });