feat: Display data on page

angular.json

@@ -92,5 +92,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@tailwindcss/postcss": "^4.1.10",
+    "daisyui": "^5.0.43",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"
@@ -27,12 +29,15 @@
     "@angular/cli": "^18.2.20",
     "@angular/compiler-cli": "^18.2.0",
     "@types/jasmine": "~5.1.0",
+    "autoprefixer": "^10.4.21",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "typescript": "~5.5.2"
   }
 }

src/app/app.component.ts

 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { RoomsComponent } from "./rooms/rooms.component";
+import { CommonModule } from '@angular/common';
+
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RoomsComponent, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'learn-angular';
+  role = 'Admin';
 }

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

+
+<table class="min-w-full border border-gray-300 rounded-lg shadow-md overflow-hidden my-4">
+    <thead class="bg-blue-600 text-white">
+      <tr>
+        <th class="px-4 py-2">Index</th>
+        <th class="px-4 py-2">Even/Odd</th>
+        <th class="px-4 py-2">Room Number</th>
+        <th class="px-4 py-2">Type</th>
+        <th class="px-4 py-2">Amenities</th>
+        <th class="px-4 py-2">Price</th>
+        <th class="px-4 py-2">Photos</th>
+        <th class="px-4 py-2">Checkin Time</th>
+        <th class="px-4 py-2">CheckoutTime</th>
+        <th class="px-4 py-2">Rating</th>
+        <th class="px-4 py-2">Selected Room</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        [ngClass]="e ? 'even' : 'odd'"
+        *ngFor="let room of rooms; let e = even; let o = odd; let i = index"
+        class="hover:bg-blue-50 transition"
+      >
+        <td class="border px-4 py-2">{{ i }}</td>
+        <td class="border px-4 py-2">{{ o ? "Odd" : "Even" }}</td>
+        <td class="border px-4 py-2">{{ room.roomNumber }}</td>
+        <td class="border px-4 py-2">{{ room.roomType }}</td>
+        <td class="border px-4 py-2">{{ room.amenities | lowercase }}</td>
+        <td class="border px-4 py-2">{{ room.price | currency }}</td>
+        <td class="border px-4 py-2">
+          <img [src]="room.photos" alt="Room Photo" width="50" height="50" class="rounded" />
+        </td>
+        <td class="border px-4 py-2">{{ room.checkinTime | date:'medium' }}</td>
+        <td class="border px-4 py-2">{{ room.checkoutTime | date:'medium'}}</td>
+        <td class="border px-4 py-2">{{room.rating | number : '1.0-0'}}</td>
+        <td class="border px-4 py-2">
+            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition" (click)="selectedRoom.emit(room)">Select</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
\ No newline at end of file

src/app/rooms/rooms-list/rooms-list.component.spec.ts

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

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

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RoomList } from '../rooms';
+
+@Component({
+  selector: 'app-rooms-list',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './rooms-list.component.html',
+  styleUrl: './rooms-list.component.css'
+})
+export class RoomsListComponent implements OnInit{
+  @Input() rooms: RoomList[] = [];
+  @Output() selectedRoom = new EventEmitter<RoomList>();
+
+  constructor() {}
+  ngOnInit(): void {}
+
+  selectRoom(room: RoomList) {
+    this.selectedRoom.emit(room);
+  }
+}

src/app/rooms/rooms.component.html

+<h1>Welcome to {{ hotelName }}</h1>
+<div [hidden]="hideRooms">
+  Number of Rooms:
+  <div [ngStyle]="{'color': rooms.availableRooms > 0 ? 'red' : 'green'}"
+  [innerText]="numberOfRooms"></div>
+</div>
+
+<!-- {{ rooms.availableRooms ?? "No rooms" }} -->
+
+<div *ngIf="rooms.availableRooms > 0">
+  <app-rooms-list [rooms] = "roomList" (selectedRoom)="selectRoom($event)"></app-rooms-list>
+</div>
+<button
+  (click)="toggle()"
+  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
+>
+  Toggle
+</button>

src/app/rooms/rooms.component.spec.ts

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

src/app/rooms/rooms.component.ts

+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Room, RoomList } from './rooms';
+import { RoomsListComponent } from './rooms-list/rooms-list.component';
+
+@Component({
+  selector: 'app-rooms',
+  standalone: true,
+  imports: [CommonModule, RoomsListComponent],
+  templateUrl: './rooms.component.html',
+  styleUrl: './rooms.component.css'
+})
+export class RoomsComponent implements OnInit{
+  hotelName = 'Hotel California';
+  numberOfRooms = 10;
+  hideRooms = false;
+  rooms: Room = {
+    totalRooms: 20,
+    availableRooms: 10,
+    bookedRooms: 5
+  };
+
+  roomList : RoomList[] = [];
+
+  constructor() {}
+  ngOnInit(): void {
+    this.roomList = [
+      {
+        roomNumber: 101,
+        roomType: 'Deluxe Suite',
+        amenities: 'Free Wi-Fi, Air Conditioning, Mini Bar',
+        price: 200,
+        photos: 'https://www.hoteldelacoupole.com/wp-content/uploads/sites/172/2019/03/P_Chiffon818_4-edit.jpg',
+        checkinTime: new Date('24-Jun-2025'),
+        checkoutTime: new Date('25-Jun-2025'),
+        rating: 4.5
+      },
+      {
+        roomNumber: 102,
+        roomType: 'Standard Room',
+        amenities: 'Free Wi-Fi, Air Conditioning',
+        price: 100,
+        photos: 'https://amorgoshotel.com/wp-content/uploads/2014/12/Amorgos-Standard-Room1-e1464286427430.jpg',
+        checkinTime: new Date('23-Jun-2025'),
+        checkoutTime: new Date('24-Jun-2025'),
+        rating: 3.2
+      },
+      {
+        roomNumber: 103,
+        roomType: 'Family Room',
+        amenities: 'Free Wi-Fi, Air Conditioning, Kitchenette',
+        price: 150,
+        photos: 'https://www.princehotels.com/furano/wp-content/uploads/sites/11/2019/06/Family-Room-Furano-Prince-Hotel-1.jpg',
+        checkinTime: new Date('22-Jun-2025'),
+        checkoutTime: new Date('23-Jun-2025'),
+        rating: 4.6
+      }
+    ];
+  }
+
+  toggle() {
+    this.hideRooms = !this.hideRooms;
+  }
+
+  selectRoom(room: RoomList) {
+    console.log('Selected Room:', room);
+  }
+}

src/app/rooms/rooms.ts

+export interface Room {
+    totalRooms: number;
+    availableRooms: number;
+    bookedRooms: number;
+}
+
+export interface RoomList {
+    roomNumber : number
+    roomType: string;
+    amenities: string;
+    price: number;
+    photos: string;
+    checkinTime: Date;
+    checkoutTime: Date;
+    rating: number;
+}
\ No newline at end of file

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,ts}",],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+