diff --git a/first-app/package-lock.json b/first-app/package-lock.json
index 43c6293..a5f2ac5 100644
--- a/first-app/package-lock.json
+++ b/first-app/package-lock.json
@@ -480,6 +480,18 @@
}
}
},
+ "node_modules/@angular/build/node_modules/@types/node": {
+ "version": "24.10.0",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz",
+ "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "peer": true,
+ "dependencies": {
+ "undici-types": "~7.16.0"
+ }
+ },
"node_modules/@angular/build/node_modules/@vitejs/plugin-basic-ssl": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.0.tgz",
@@ -570,7 +582,6 @@
"integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@@ -923,7 +934,6 @@
"integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@inquirer/checkbox": "^4.2.1",
"@inquirer/confirm": "^5.1.14",
@@ -1055,6 +1065,18 @@
"listr2": "9.0.1"
}
},
+ "node_modules/@angular/cli/node_modules/@types/node": {
+ "version": "24.10.0",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz",
+ "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "peer": true,
+ "dependencies": {
+ "undici-types": "~7.16.0"
+ }
+ },
"node_modules/@angular/cli/node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1163,7 +1185,6 @@
"resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.6.tgz",
"integrity": "sha512-+gHMuFe0wz4f+vfGZ2q+fSQSYaY7KlN7QdDrFqLnA7H2sythzhXvRbXEtp4DkPjihh9gupXg2MeLh1ROy5AfSw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -1180,7 +1201,6 @@
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.6.tgz",
"integrity": "sha512-OdjXBsAsnn7qiW6fSHClwn9XwjVxhtO9+RbDc6Mf+YPCnJq0s8T78H2fc8VdJFp/Rs+tMZcwwjd9VZPm8+2XWA==",
"license": "MIT",
- "peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -1194,7 +1214,6 @@
"integrity": "sha512-VOFRBx9fBt2jW9I8qD23fwGeKxBI8JssJBAMqnFPl3k59VJWHQi6LlXZCLCBNdfwflTJdKeRvdgT51Q0k6tnFQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@babel/core": "7.28.3",
"@jridgewell/sourcemap-codec": "^1.4.14",
@@ -1227,7 +1246,6 @@
"resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.6.tgz",
"integrity": "sha512-sDURQWnjwE4Y750u/5qwkZEYMoI4CrKghnx4aKulxCnohR3//C78wvz6p8MtCuqYfzGkdQZDYFg8tgAz17qgPw==",
"license": "MIT",
- "peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -1271,7 +1289,6 @@
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.6.tgz",
"integrity": "sha512-gFp1yd+HtRN8XdpMatRLO5w6FLIzsnF31lD2Duo4BUTCoMAMdfaNT6FtcvNdKu7ANo27Ke26fxEEE2bh6FU98A==",
"license": "MIT",
- "peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -1338,7 +1355,6 @@
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -3847,8 +3863,7 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.126.tgz",
"integrity": "sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==",
"dev": true,
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/@yarnpkg/lockfile": {
"version": "1.1.0",
@@ -4136,7 +4151,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.9",
"caniuse-lite": "^1.0.30001746",
@@ -4908,7 +4922,6 @@
"integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"accepts": "^2.0.0",
"body-parser": "^2.2.0",
@@ -5699,7 +5712,6 @@
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"cli-truncate": "^4.0.0",
"colorette": "^2.0.20",
@@ -7212,7 +7224,6 @@
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
"integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
"license": "Apache-2.0",
- "peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -7251,7 +7262,6 @@
"integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -7931,8 +7941,7 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
- "license": "0BSD",
- "peer": true
+ "license": "0BSD"
},
"node_modules/tuf-js": {
"version": "3.1.0",
@@ -7970,7 +7979,6 @@
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"dev": true,
"license": "Apache-2.0",
- "peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -7985,7 +7993,8 @@
"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
"dev": true,
"license": "MIT",
- "optional": true
+ "optional": true,
+ "peer": true
},
"node_modules/unique-filename": {
"version": "4.0.0",
@@ -8329,7 +8338,6 @@
"integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
"dev": true,
"license": "MIT",
- "peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
@@ -8348,8 +8356,7 @@
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
"integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
}
}
}
diff --git a/first-app/src/app/home/home.html b/first-app/src/app/home/home.html
index 78f935e..22af009 100644
--- a/first-app/src/app/home/home.html
+++ b/first-app/src/app/home/home.html
@@ -1,6 +1,9 @@
+
+
\ No newline at end of file
diff --git a/first-app/src/app/home/home.ts b/first-app/src/app/home/home.ts
index 491f18e..d0cd17c 100644
--- a/first-app/src/app/home/home.ts
+++ b/first-app/src/app/home/home.ts
@@ -1,9 +1,25 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {HousingLocation} from '../housing-location/housing-location'; //Importation du component ici pour l'intégrer à la page
+
+import {HousingLocationInfo} from '../housinglocation'; // Importation de l'interface
@Component({
- selector: 'app-home',
- templateUrl: './home.html',
- styleUrls: ['./home.css'],
+ selector: 'app-home',
+ imports: [HousingLocation],
+ templateUrl: './home.html',
+ styleUrls: ['./home.css'],
})
-export class Home {}
+export class Home {
+ readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
+ housingLocation: HousingLocationInfo = {
+ id: 9999,
+ name: 'Test Home',
+ city: 'Test city',
+ state: 'ST',
+ photo: `${this.baseUrl}/example-house.jpg`,
+ availableUnits: 99,
+ wifi: true,
+ laundry: false,
+ };
+}
diff --git a/first-app/src/app/housing-location/housing-location.css b/first-app/src/app/housing-location/housing-location.css
new file mode 100644
index 0000000..925850e
--- /dev/null
+++ b/first-app/src/app/housing-location/housing-location.css
@@ -0,0 +1,30 @@
+.listing {
+ background: var(--accent-color);
+ border-radius: 30px;
+ padding-bottom: 30px;
+}
+.listing-heading {
+ color: var(--primary-color);
+ padding: 10px 20px 0 20px;
+}
+.listing-photo {
+ height: 250px;
+ width: 100%;
+ object-fit: cover;
+ border-radius: 30px 30px 0 0;
+}
+.listing-location {
+ padding: 10px 20px 20px 20px;
+}
+.listing-location::before {
+ content: url("/assets/location-pin.svg") / "";
+}
+section.listing a {
+ padding-left: 20px;
+ text-decoration: none;
+ color: var(--primary-color);
+}
+section.listing a::after {
+ content: "\203A";
+ margin-left: 5px;
+}
\ No newline at end of file
diff --git a/first-app/src/app/housing-location/housing-location.ts b/first-app/src/app/housing-location/housing-location.ts
new file mode 100644
index 0000000..c96a357
--- /dev/null
+++ b/first-app/src/app/housing-location/housing-location.ts
@@ -0,0 +1,15 @@
+import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
+import {HousingLocationInfo} from '../housinglocation'; // Interface
+@Component({
+ selector: 'app-housing-location',
+ imports: [],
+ template: `
+
+ housing-location works!
+
+ `,
+ styleUrls: ['./housing-location.css'],
+})
+export class HousingLocation {
+ housingLocation = input.required();
+}
diff --git a/first-app/src/app/housinglocation.ts b/first-app/src/app/housinglocation.ts
new file mode 100644
index 0000000..fed12ae
--- /dev/null
+++ b/first-app/src/app/housinglocation.ts
@@ -0,0 +1,10 @@
+export interface HousingLocationInfo {
+ id: number;
+ name: string;
+ city: string;
+ state: string;
+ photo: string;
+ availableUnits: number;
+ wifi: boolean;
+ laundry: boolean;
+}
\ No newline at end of file