description bien

package.json

@@ -43,6 +43,7 @@
     "hammerjs": "2.0.8",
     "jquery": "^3.6.0",
     "moment": "^2.29.4",
+    "ngx-star-rating": "^2.1.0",
     "perfect-scrollbar": "1.5.5",
     "popper.js": "1.16.1",
     "rxjs": "~7.5.0",

src/app/app.module.ts

@@ -32,7 +32,7 @@ import { MdpComponent } from './mdp/mdp.component';
     AppRoutingModule,
     ComponentsModule,
     MatMenuModule,
-    MatIconModule
+    MatIconModule,
   ],
   declarations: [
     AppComponent,

src/app/components/appartement/appartement.component.html

@@ -1 +1,122 @@
-<p>appartement works!</p>
+<style>
+h1{
+    text-align: center;
+    color: coral;
+    text-decoration: solid;
+}
+
+.slider {
+  width: 800px;
+  margin: 30px auto;
+  position: relative;
+}
+
+.slider-viewport {
+  width: 800px;
+  height: 400px;
+  overflow: hidden;
+}
+
+.slider-content {
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-transition: 1s all;
+  transition: 1s all;
+}
+.slider-content img {
+  width: 800px;
+  height: 400px;
+}
+
+.slider-nav {
+  position: absolute;
+  width: 100%;
+  bottom: 555px;
+  margin-top: 10px;
+  text-align: center;
+}
+.slider-nav a {
+  -webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
+          box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.3);
+  display: inline-block;
+  background-color: #adafbc;
+  width: 15px;
+  height: 15px;
+  margin: 0 3px;
+
+}
+.slider-nav a:hover {
+  background-color: rgb(216, 90, 18);
+  -webkit-box-shadow: 0px 0px 5px 0px rgba(216, 90, 18);
+          box-shadow: 0px 0px 5px 0px rgba(216, 90, 18);
+}
+
+#img2:target .slider-content {
+  -webkit-transform: translateX(-800px);
+          transform: translateX(-800px);
+}
+
+h4{
+    font-weight: 200 ;
+}
+.avis{
+  color: chocolate;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 12pt;
+}
+
+.checked{
+    color: orange;
+}
+</style>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+
+<div class="main-content">
+<h1><strong> Appartement à acheter au coeur de Paris</strong></h1>
+
+    <div class="slider">
+        <div class="slider-viewport">
+        <div id="img1">
+            <div id="img2">
+
+                    <div class="slider-content">
+                        <img src="src/assets/img/appart1.jpg" width="50px" height="50px">
+                        <img src="src/assets/img/maison.jpgc/assets/img/salon-luxe-loft-rendu-3d-etagere-pres-table-manger.jpg" width="50px" height="50px">
+
+                    </div>
+                </div>
+                </div>
+            </div>
+            </div>
+
+        <div class="slider-nav">
+        <a href="#img1"></a>
+        <a href="#img2"></a>
+        </div>
+<br>
+<br>
+        <div class="container-fluid"> 
+                <div>
+                <h4><strong> Description du bien</strong></h4>
+                </div>
+                <br>
+                <p>Nouvelle EXCLUSIVITE dans votre agence </p>
+                <p>Situé dans une belle copropriété familiale, sécurisée et très bien entretenue, 
+            découvrez ce bel appartement de 89m² compleétement rénové, composé de 2 chambres, un séjour, une cuisine 
+            indépendante et aménagée et équipée et une salle de bains.</p>
+                <p>La copropriété est située à deux pas des écoles, des commerces et des transports 
+                    (bus au pied de l'immeuble et à 15 minutes à pied du métro 7)</p>
+                    <br>
+                    <p>Vous bénéficierez également d'un box en sous-sol ainsi que d'une cave.</p>
+                    <br>
+                    <p><strong>Prix : 125 800 euros</strong></p>
+        </div>
+        <div>
+        <span class = "avis">Notez cette offre   </span>
+        <span class ="fas fa-star checked"></span>
+        <span class ="fas fa-star checked" ></span>
+        <span class ="fas fa-star checked"></span>
+        <span class ="fas fa-star" ></span>
+        <span class ="fas fa-star" ></span>
+</div>

src/app/components/appartement/appartement.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Appartement } from 'app/model/appartement';
 import { AppartementService } from 'app/services/appartement.service';
@@ -14,15 +15,15 @@ export class AppartementComponent implements OnInit {
   appartement: Appartement = new Appartement();
 
   appartementS!: any[];
-  offres!: any[];
-
+  offres!: any[];  
   constructor(private appartementService: AppartementService, private offreService: OffreService, private router: Router) {
-
+   
   }
 
   ngOnInit(): void {
     this.findAllAppartement();
     this.findAllOffres();
+
   }
 
   findAllAppartement() {
@@ -48,5 +49,5 @@ export class AppartementComponent implements OnInit {
       }
     )
   }
-
-}
+ 
+}  

src/app/layouts/admin-layout/admin-layout.module.ts

@@ -32,7 +32,7 @@ import { MatSelectModule } from '@angular/material/select';
     MatInputModule,
     MatSelectModule,
     MatTooltipModule,
-    HttpClientModule
+    HttpClientModule,
   ],
   declarations: [
     DashboardComponent,

src/app/layouts/admin-layout/admin-layout.routing.ts

@@ -11,6 +11,7 @@ import { NotificationsComponent } from '../../notifications/notifications.compon
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
 import { RegistrationComponent } from 'app/components/registration/registration.component';
 import { MdpComponent } from 'app/mdp/mdp.component';
+import { AppartementComponent } from 'app/components/appartement/appartement.component';
 
 export const AdminLayoutRoutes: Routes = [
     // {
@@ -67,4 +68,5 @@ export const AdminLayoutRoutes: Routes = [
     { path: 'upgrade', component: UpgradeComponent },
     { path: 'registration', component: RegistrationComponent },
     { path: 'mdp', component: MdpComponent},
+    { path : 'appartements', component: AppartementComponent}
 ];

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

@@ -63,8 +63,8 @@ <h3 class="mb-0">Liste des offres</h3>
                                     </thead>
                                     <tbody>
                                         <tr *ngFor="let o of offreRecherche">
-                                            <td class="text-center"><img src="data:image/jpeg;base64,{{o.imageOffre}}"
-                                                    height="120" width="120" /></td>
+                                            <td class="text-center"><a routerLink="/appartements"><img src="data:image/jpeg;base64,{{o.imageOffre}}"
+                                                    height="120" width="120" ></a></td>
                                             <td class="text-center">{{o.description}}</td>
                                             <td class="text-center">{{o.ville}}</td>
                                             <td class="text-center">{{o.adresse}}</td>