input-output and array functions

db.json

@@ -14,11 +14,6 @@
       "title": "Restaurant",
       "category": "Italian",
       "id": 3
-    },
-    {
-      "title": "Restaurant",
-      "category": "Italian",
-      "id": 4
     }
   ]
 }

src/app/app.module.ts

@@ -16,16 +16,14 @@ import { RestaurantsComponent } from './restaurants/restaurants.component';
 import { RestaurantListComponent } from './restaurants/restaurant-list/restaurant-list.component';
 import { RestaurantComponent } from './restaurants/restaurant/restaurant.component';
 import { RestaurantAddComponent } from './restaurants/restaurant-add/restaurant-add.component';
-import { RestaurantEditComponent } from './restaurants/restaurant-edit/restaurant-edit.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     RestaurantsComponent,
     RestaurantListComponent,
     RestaurantComponent,
-    RestaurantAddComponent,
-    RestaurantEditComponent
+    RestaurantAddComponent
   ],
   imports: [
     BrowserModule,

src/app/restaurants/restaurant-add/restaurant-add.component.ts

@@ -7,15 +7,14 @@ import { IRestaurant } from '../shared/restaurant.model';
   styleUrls: ['./restaurant-add.component.scss']
 })
 export class RestaurantAddComponent {
-  @Input() restaurants: IRestaurant[] = [];
   @Output() newRestaurantEvent = new EventEmitter<any>();
 
   restaurant: IRestaurant = {title: "Restaurant", category: "Italian"}
   constructor() { }
 
   newRestaurant(value: IRestaurant) {
     this.newRestaurantEvent.emit(value);
-    console.log('clicked', value)
+    console.log('newRestaurant Event emitted ',value)
   }
 
 }

src/app/restaurants/restaurant-list/restaurant-list.component.html

@@ -3,14 +3,27 @@
         <mat-card *ngFor="let restaurant of restaurants" class="spacer">
             <mat-card-content>
                 {{restaurant.title}} {{restaurant.id}}
-                {{restaurant.category}}
+                # {{restaurant.category}}
             </mat-card-content>
             <mat-card-footer>
-                <app-restaurant-edit>
-
-                </app-restaurant-edit>
+                <div class="container">
+                    <button  mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
+                        <mat-icon (click)="deleteRestaurant(restaurant.id)">delete</mat-icon>
+                    </button>
+                    <button (click)="editRestaurant(restaurant.id)" mat-mini-fab color="none" aria-label="Example icon button with a menu icon">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+                </div>
             </mat-card-footer>
         </mat-card>
     </div>
 </div>
 
+<div class="container" [ngClass]="">
+    <input type="text" #bindTitle placeholder="Title here...">
+    <select name="category" id="cat">
+        <option #bindCategory value="Italian">Italian</option>
+        <option #bindCategory value="Italian">Greek</option>
+        <option #bindCategory value="Italian">Chinese</option>        
+    </select>
+</div>

src/app/restaurants/restaurant-list/restaurant-list.component.scss

@@ -1,3 +1,7 @@
 .spacer{
     margin: 10px 0;
+}
+
+.visible{
+    display: block;
 }

src/app/restaurants/restaurant-list/restaurant-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { IRestaurant } from '../shared/restaurant.model';
 import { RestaurantsService } from '../shared/restaurant.service';
 
@@ -9,9 +9,22 @@ import { RestaurantsService } from '../shared/restaurant.service';
 })
 export class RestaurantListComponent {
   @Input() restaurants: IRestaurant[] = [];
-
+  @Output() delRestaurantEvent = new EventEmitter<any>();
+  @Output() editRestaurantEvent = new EventEmitter<any>();
+
+  constructor(private restaurantsService: RestaurantsService) {}
+
+  deleteRestaurant(value: any) {
+    this.delRestaurantEvent.emit(value);
+  }
+
+  editRestaurant(value: any) {
+    this.editRestaurantEvent.emit(value);
+    console.log('From editRestaurant Event emitter', value)
+  }
 
 }
 
 
 
+

src/app/restaurants/restaurants.component.html

@@ -1,8 +1,8 @@
 <div class="container">
-    <app-restaurant-add [restaurants]="restaurants" (newRestaurantEvent)="addRestaurant($event)">
+    <app-restaurant-add (newRestaurantEvent)="addRestaurant($event)">
 
     </app-restaurant-add>
-    <app-restaurant-list [restaurants]="restaurants">
+    <app-restaurant-list [restaurants]="restaurants" (delRestaurantEvent)="deleteRestaurant($event)">
 
     </app-restaurant-list>
 </div>

src/app/restaurants/restaurants.component.ts

@@ -9,8 +9,7 @@ import { RestaurantsService } from './shared/restaurant.service';
 })
 export class RestaurantsComponent implements OnInit {
   restaurants: IRestaurant[] = [];
-  // @Input() restaurants: IRestaurant[] = [];
-
+
   constructor(private restaurantsService: RestaurantsService) {}
 
   ngOnInit(): void {
@@ -24,15 +23,18 @@ export class RestaurantsComponent implements OnInit {
 
   addRestaurant(restaurant: IRestaurant){
     this.restaurantsService.addRestaurant(restaurant)
-    .subscribe(restaurant => this.restaurants.push(restaurant));
+    .subscribe((restaurant) => {
+      this.restaurants.push(restaurant)
+    });
   }
 
   deleteRestaurant(restaurantId: any){
     this.restaurantsService.deleteRestaurant(restaurantId)
-    .subscribe((res) => {
-      console.log(`In: ${res}`)
-      this.restaurants.filter( (restaurant)=> { restaurant.id == 1 } )
-    });
+    .subscribe(
+      ()=> {
+        this.restaurants = this.restaurants.filter(elem => elem.id != restaurantId)
+      }
+    )
   }
 
 }

src/app/restaurants/shared/restaurant.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, tap } from 'rxjs';
+import { Observable } from 'rxjs';
 import { IRestaurant } from './restaurant.model';
 
 @Injectable({
@@ -10,8 +10,6 @@ import { IRestaurant } from './restaurant.model';
 export class RestaurantsService {
   private restaurantsUrl = 'http://localhost:3000/restaurants/';
 
-  // restaurants$ = this.http.get<IRestaurant[]>(this.restaurantsUrl); 
-
   constructor(private http: HttpClient) { }
 
     /** GET restaurants from the server */
@@ -23,21 +21,17 @@ export class RestaurantsService {
     addRestaurant(restaurant: IRestaurant): Observable<IRestaurant> {
       return this.http.post<IRestaurant>(this.restaurantsUrl, restaurant);
     }
-
-    /** DELETE: a specific restaurant from the server */
-    // deleteRestaurant(restaurantId: any): Observable<any> {
-    //   return this.http.delete<any>(this.restaurantsUrl + restaurantId);
-    // }
-
 
     /** DELETE: delete a restaurant from the server */
     deleteRestaurant(id: number): Observable<any> {
       const url = `${this.restaurantsUrl}${id}`;
       return this.http.delete<any>(url)
-      .pipe(
-        tap((res) => console.log(`deleted res id=${id}`))
-      );
-  }
-
+    }
+
+    /** PUT: edit a restaurant from the server */
+    editRestaurant(restaurant: IRestaurant): Observable<any> {
+      const url = `${this.restaurantsUrl}${restaurant.id}`;
+      return this.http.put<any>(url, restaurant)
+    }
 
 }