rental details and rental service added

src/app/app.module.ts

@@ -9,18 +9,18 @@ import { HeaderComponent } from './common/header/header.component';
 import { RentalComponent } from './rental/rental.component';
 import { TempComponent } from './temp/temp.component';
 import { FooterComponent } from './common/footer/footer.component';
+import { RentalDetailComponent } from "./rental/rental-detail/rental-detail.component";
 
 
 const routes:Routes = [
-  {path: "", component: RentalComponent },
+  {path: "", redirectTo:'/rentals',pathMatch:'full'},
   {path: "temp", component: TempComponent }
 ];
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    // RentalComponent,
     TempComponent,
     FooterComponent
   ],

src/app/rental/rental-detail/rental-detail.component.html

@@ -0,0 +1,6 @@
+
+{{rentalDetails?.title}} <br>
+{{rentalDetails?.subtitle}} <br>
+{{rentalDetails?.text}} <br>
+{{rentalDetails?.bedrooms}} <br>
+{{rentalDetails?.id}} <br>

src/app/rental/rental-detail/rental-detail.component.spec.ts

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

src/app/rental/rental-detail/rental-detail.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
+import { RentalService } from "../shared/rental.service";
+
+@Component({
+  selector: 'app-rental-detail',
+  templateUrl: './rental-detail.component.html',
+  styleUrls: ['./rental-detail.component.scss']
+})
+export class RentalDetailComponent implements OnInit {
+
+  currentRentalId:any;
+  rentalDetails:any;
+
+  constructor(private actRoute:ActivatedRoute,
+              private rentalService:RentalService) { }
+
+  ngOnInit() {
+    try {
+      this.actRoute.params.subscribe((params:any)=>{
+
+        this.rentalService.getRentalById(params["id"]).subscribe((data:any)=>{
+            this.rentalDetails = data;
+            console.log(data);
+        });
+      })
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+}

src/app/rental/rental-list-item/rental-list-item.component.html

@@ -1,9 +1,11 @@
-<div class="card bwm-card">
+<a href="/rentals/{{rentalData?.id}}">
+  <div class="card bwm-card">
     <img class="card-img-top" src="http://via.placeholder.com/350x250">
-      <div class="card-block">
-        <h6 class="card-subtitle">Whole Apartment</h6>
-        <h4 class="card-title">Some Nice Apartment</h4>
-        <p class="card-text">$170 per Night &#183; Free Cancellation</p>
-        <a href="#" class="card-link">More Info</a>
-      </div>
-  </div>
+    <div class="card-block">
+      <h6 class="card-subtitle">{{rentalData?.subtitle}}</h6>
+      <h4 class="card-title">{{rentalData?.title}}</h4>
+      <p class="card-text">{{rentalData?.text}}</p>
+      <a href="#" class="card-link">More Info</a>
+    </div>
+  </div>
+</a>

src/app/rental/rental-list-item/rental-list-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,Input } from '@angular/core';
 
 @Component({
   selector: 'app-rental-list-item',
@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RentalListItemComponent implements OnInit {
 
+  @Input() rentalData:any;
+
   constructor() { }
 
   ngOnInit() {

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

@@ -1,8 +1,8 @@
 <section id="rentalListing">
   <h1 class="tilte">
     <div class="row">
-      <div class="col-md-3 col-xs-6">
-       <app-rental-list-item></app-rental-list-item>
+      <div class="col-md-3 col-xs-6" *ngFor="let rental of arrRentals">
+       <app-rental-list-item [rentalData]="rental"></app-rental-list-item>
       </div>
     </div>
   </h1>

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { RentalService } from "../shared/rental.service";
 
 @Component({
   selector: 'app-rental-list',
@@ -7,9 +8,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RentalListComponent implements OnInit {
 
-  constructor() { }
+  constructor(private rentalService: RentalService) { }
+
+  arrRentals:any = [];
 
   ngOnInit() {
+      // this.arrRentals = this.rentalService.getRentals();        
+      this.rentalService.getRentals().subscribe((data)=>{
+          this.arrRentals = data;
+      },
+      (err)=>{
+
+      },
+      ()=>{
+
+      });
   }
 
 }

src/app/rental/rental.component.html

@@ -1 +1,4 @@
-<app-rental-list></app-rental-list>
+<!-- <app-rental-list></app-rental-list> -->
+
+
+<router-outlet></router-outlet>

src/app/rental/rental.module.ts

@@ -1,17 +1,34 @@
 import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterModule, Routes } from "@angular/router";
+
+import { RentalService } from "../rental/shared/rental.service";
 
 import { RentalComponent } from './rental.component';
 import { RentalListComponent } from './rental-list/rental-list.component';
 import { RentalListItemComponent } from './rental-list-item/rental-list-item.component';
+import { RentalDetailComponent } from './rental-detail/rental-detail.component';
+
+const routes: Routes = [{
+    path: "rentals",
+    component: RentalComponent,
+    children: [
+        { path: '', component: RentalListComponent },
+        { path: ':id', component: RentalDetailComponent }
+    ]
+}]
 
 @NgModule({
-    declarations:[
+    declarations: [
         RentalComponent,
         RentalListComponent,
-        RentalListItemComponent
+        RentalListItemComponent,
+        RentalDetailComponent
     ],
-    imports:[],
-    providers:[]
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes)],
+    providers: [RentalService]
 })
 
 export class RentalModule { }

src/app/rental/shared/rental.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RentalService } from './rental.service';
+
+describe('RentalService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RentalService = TestBed.get(RentalService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/rental/shared/rental.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+@Injectable()
+export class RentalService {
+
+  constructor() { }
+
+  arrRentals = [
+    { "id": "0","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$170 per Night · Free Cancellation" },
+    { "id": "1","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$170 per Night · Free Cancellation" },
+    { "id": "2","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$180 per Night · Free Cancellation" },
+    { "id": "3","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$190 per Night · Free Cancellation" },
+    { "id": "4","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$200 per Night · Free Cancellation" },
+    { "id": "5","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$210 per Night · Free Cancellation" },
+    { "id": "6","city":"","street":"","category":"","bedrooms":"","description":"","dailyRate":"","createdAt":"","subtitle": "Whole Apartment", "title": "Some Nice Apartment", "text": "$220 per Night · Free Cancellation" }
+    ];
+
+    public getRentals() {
+
+      const rentalObservable = new Observable((observer:any)=>{
+        setTimeout(() => {
+          observer.next(this.arrRentals);
+        }, 1000);
+
+        setTimeout(() => {
+          observer.error("I am a error");
+        }, 2000);
+
+        setTimeout(() => {
+          observer.complete();
+        }, 3000);
+      })
+        return rentalObservable;      
+    }
+
+    public getRentalById(id){
+      const rentalDetailsByIDObs = new Observable((observer:any)=>{
+        setTimeout(() => {
+          var a = this.arrRentals[id];
+          observer.next(a);
+        }, 100);
+        setTimeout(() => {
+          observer.error("I am a error");
+        }, 2000);
+
+        setTimeout(() => {
+          observer.complete();
+        }, 3000);
+      });
+
+      return rentalDetailsByIDObs;
+    }
+}