Service

src/app/app.component.html

@@ -1 +1,5 @@
-<app-home></app-home>
+<div class="container">
+  <h1 class="text-center my-5 fw-bold">Homes</h1>
+
+  <app-home></app-home>
+</div>

src/app/details/details.component.html

@@ -0,0 +1 @@
+<p>details works!</p>

src/app/details/details.component.spec.ts

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

src/app/details/details.component.ts

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

src/app/home/home.component.html

@@ -1,10 +1,14 @@
-<section class="m-5">
+<section class="my-5">
   <form class="input-group">
     <input class="form-control" type="text" placeholder="Filter by city"/>
     <button class="btn btn-primary" type="button">Search</button>
   </form>
 </section>
 
-<section>
-  <app-housing-location></app-housing-location>
-</section>
+<div class="row g-4">
+  @for (housingLocation of housingLocationList; track housingLocation.id) {
+    <div class="col-12 col-md-6 col-lg-4 col-xl-3">
+      <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
+    </div>
+  }
+</div>

src/app/home/home.component.ts

@@ -1,5 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {HousingLocationComponent} from '../housing-location/housing-location.component';
+import {HousingLocation} from '../housing-location';
+import {HousingService} from '../housing.service';
 
 @Component({
   selector: 'app-home',
@@ -11,5 +13,10 @@ import {HousingLocationComponent} from '../housing-location/housing-location.com
   styleUrl: './home.component.css'
 })
 export class HomeComponent {
+  housingLocationList: HousingLocation[] = [];
+  housingService: HousingService = inject(HousingService);
 
+  constructor() {
+    this.housingLocationList = this.housingService.getAllHousingLocations();
+  }
 }

src/app/housing-location.ts

@@ -0,0 +1,10 @@
+export interface HousingLocation {
+  id: number;
+  name: string;
+  city: string;
+  state: string;
+  photo: string;
+  availableUnits: number;
+  wifi: boolean;
+  laundry: boolean;
+}

src/app/housing-location/housing-location.component.html

@@ -1 +1,15 @@
-<p>housing-location works!</p>
+<section class="card h-100">
+  <div class="position-relative" style="height: 200px;">
+    <img
+      [src]="housingLocation.photo"
+      class="card-img-top position-absolute w-100 h-100"
+      style="object-fit: cover;"
+      alt="Exterior photo of {{ housingLocation.name }}"
+      crossorigin
+    />
+  </div>
+  <div class="card-body">
+    <h2 class="card-title">{{ housingLocation.name }}</h2>
+    <p class="card-text">{{ housingLocation.city }}, {{ housingLocation.state }}</p>
+  </div>
+</section>

src/app/housing-location/housing-location.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {HousingLocation} from '../housing-location';
 
 @Component({
   selector: 'app-housing-location',
@@ -8,5 +9,5 @@ import { Component } from '@angular/core';
   styleUrl: './housing-location.component.css'
 })
 export class HousingLocationComponent {
-
+  @Input() housingLocation!: HousingLocation;
 }

src/app/housing.service.ts

@@ -0,0 +1,108 @@
+import {Injectable} from '@angular/core';
+import {HousingLocation} from './housing-location';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HousingService {
+  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
+  protected housingLocationList: HousingLocation[] = [{
+    id: 0,
+    name: 'Acme Fresh Start Housing',
+    city: 'Chicago',
+    state: 'IL',
+    photo: `${this.baseUrl}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`,
+    availableUnits: 4,
+    wifi: true,
+    laundry: true,
+  }, {
+    id: 1,
+    name: 'A113 Transitional Housing',
+    city: 'Santa Monica',
+    state: 'CA',
+    photo: `${this.baseUrl}/brandon-griggs-wR11KBaB86U-unsplash.jpg`,
+    availableUnits: 0,
+    wifi: false,
+    laundry: true,
+  }, {
+    id: 2,
+    name: 'Warm Beds Housing Support',
+    city: 'Juneau',
+    state: 'AK',
+    photo: `${this.baseUrl}/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg`,
+    availableUnits: 1,
+    wifi: false,
+    laundry: false,
+  }, {
+    id: 3,
+    name: 'Homesteady Housing',
+    city: 'Chicago',
+    state: 'IL',
+    photo: `${this.baseUrl}/ian-macdonald-W8z6aiwfi1E-unsplash.jpg`,
+    availableUnits: 1,
+    wifi: true,
+    laundry: false,
+  }, {
+    id: 4,
+    name: 'Happy Homes Group',
+    city: 'Gary',
+    state: 'IN',
+    photo: `${this.baseUrl}/krzysztof-hepner-978RAXoXnH4-unsplash.jpg`,
+    availableUnits: 1,
+    wifi: true,
+    laundry: false,
+  }, {
+    id: 5,
+    name: 'Hopeful Apartment Group',
+    city: 'Oakland',
+    state: 'CA',
+    photo: `${this.baseUrl}/r-architecture-JvQ0Q5IkeMM-unsplash.jpg`,
+    availableUnits: 2,
+    wifi: true,
+    laundry: true,
+  }, {
+    id: 6,
+    name: 'Seriously Safe Towns',
+    city: 'Oakland',
+    state: 'CA',
+    photo: `${this.baseUrl}/phil-hearing-IYfp2Ixe9nM-unsplash.jpg`,
+    availableUnits: 5,
+    wifi: true,
+    laundry: true,
+  }, {
+    id: 7,
+    name: 'Hopeful Housing Solutions',
+    city: 'Oakland',
+    state: 'CA',
+    photo: `${this.baseUrl}/r-architecture-GGupkreKwxA-unsplash.jpg`,
+    availableUnits: 2,
+    wifi: true,
+    laundry: true,
+  }, {
+    id: 8,
+    name: 'Seriously Safe Towns',
+    city: 'Oakland',
+    state: 'CA',
+    photo: `${this.baseUrl}/saru-robert-9rP3mxf8qWI-unsplash.jpg`,
+    availableUnits: 10,
+    wifi: false,
+    laundry: false,
+  }, {
+    id: 9,
+    name: 'Capital Safe Towns',
+    city: 'Portland',
+    state: 'OR',
+    photo: `${this.baseUrl}/webaliser-_TPTXZd9mOo-unsplash.jpg`,
+    availableUnits: 6,
+    wifi: true,
+    laundry: true,
+  },];
+
+  getAllHousingLocations(): HousingLocation[] {
+    return this.housingLocationList;
+  }
+
+  getHousingLocationById(id: number): HousingLocation | undefined {
+    return this.housingLocationList.find((housingLocation) => housingLocation.id === id);
+  }
+}