Angular2 parent child components

Question

I’m working on an Angular2 application and I can’t figure out this parent / child part.

What I want to achieve: a "Producer" has multiple "Products". In the end I want to retrieve lists of products per producer.

The problem is, I can’t figure out how I can add a “Product” to a list in “Producer”.

With the code below I do the crud operations on both "Product" and "Producer", but I don't know how to proceed in adding to "Product" to the "Producer".

My backend is a Spring Boot + MongoDB backend.

I have my producers.component which calls the template to add a product:

producers.component.html which calls the addProduct()

   <div *ngIf="selectedProducer">
    <h2>{{selectedProducer.name | uppercase}} is my producer</h2>
    <button (click)="gotoDetail()">View details</button>
    <div>
    <button (click)="addProduct()">Add product</button>
</div>

producers.component.ts addProduct()

addProduct(): void{
this.router.navigate(['/producers', this.selectedProducer.id,'addProduct']);
}

app-routing.module.ts routing to ProductAddComponent

 { path: 'producers/:id/addProduct',     component: ProductAddComponent }

product-add.component.html form to add the product

  <h2>Add product</h2>
  <div>
     <form [formGroup]="productForm" (ngSubmit)="add(productForm)">

    <span><h3>Add Product:</h3></span>

    <label>Product id:</label><input formControlName="id"><br>
    <label>Product ean:</label><input formControlName="ean"><br>
    <label>Product name:</label><input formControlName="name"><br>

    <span><h5>Nutrition per 100 grams:</h5></span>
    <label>Energy (kcal)</label>
    <input formControlName="kcal"><br>
    <label>Saturated fat:</label>
    <input formControlName="satFat"><br>
    <label>Unsaturated fat:</label>
    <input formControlName="unsatFat"><br>
    <label>Carbohydrates:</label>
    <input formControlName="carbs"><br>
    <label>Protein:</label>
    <input formControlName="protein"><br>
    <label>Sugar:</label>
    <input formControlName="sugar"><br>
    <label>Salt:</label>
    <input formControlName="salt"><br>

    <button type="submit" class="btn btn-success">Submit</button>
</form>

product-add.component.ts

 import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';

 import { Nutrition } from '../model/nutrition';
 import { Product } from '../model/product';
 import { ProductService } from '../services/product.service';

 import { Observable } from "rxjs/Observable";

 import { Form, FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';


 @Component({
   selector: 'my-product-add',
   templateUrl: '../templates/product-add.component.html',
   styleUrls: ['../css/product-add.component.css'],
   providers: [ProductService]
 })

 export class ProductAddComponent implements OnInit { 
   jsonResponse: string;
   errorMessage: string;
   products: Product[];
   selectedProduct: Product;
   lastRequestResult : boolean;
   nameToAddInput: string;
   @Input('producer') producerName: string;
   productWithSpecifiedNameAlreadyExists: boolean = false;

   public productForm: FormGroup;

   constructor(
    private router: Router,
    private productService: ProductService,
    private _fb: FormBuilder 
     ) { }

   ngOnInit(): void{
    this.productForm = new FormGroup({
      producer: new FormControl('', Validators.required),
      id: new FormControl('', Validators.required),
      name: new FormControl('', Validators.required),
      ean: new FormControl('', Validators.required),
      kcal: new FormControl('', Validators.required),
      satFat: new FormControl('', Validators.required),
      unsatFat: new FormControl('', Validators.required),
      carbs: new FormControl('', Validators.required),
      protein: new FormControl('', Validators.required),
      sugar: new FormControl('', Validators.required),
      salt: new FormControl('', Validators.required)
    })
   }

   getProducts() {
     this.productService.getProducts()
     .subscribe(
       (data) => {
         this.jsonResponse = JSON.stringify(data);
         this.products = data;
         console.log(data);
       })
   }

   add(product: Product): void {
     var product : Product = new Product();
      product.id = this.productForm.get('id').value.trim();
      product.name = this.productForm.get('name').value.trim();
      product.ean = this.productForm.get('ean').value.trim();

      product.nutrition = {
        kcal: this.productForm.get('kcal').value.trim(),
        satFat: this.productForm.get('satFat').value.trim(),
        unsatFat: this.productForm.get('unsatFat').value.trim(),
        carbs: this.productForm.get('carbs').value.trim(),
        protein: this.productForm.get('protein').value.trim(),
        sugar: this.productForm.get('sugar').value.trim(),
        salt: this.productForm.get('salt').value.trim()
   };

   this.productService.create(product)
     .subscribe(
       data => {
         this.lastRequestResult = (data == "true");
         this.productWithSpecifiedNameAlreadyExists = !this.lastRequestResult;
       },
     err => this.logError(err),
       () => {
         this.getProducts();
         console.log("add request result: " + this.lastRequestResult);
         console.log(product);
       }
     )
    }

   private logError(error: any): Promise<any> {
     console.error('An error occurred', error);
     return Promise.reject(error.message || error);
   }

 }

product.service.ts

 import { Injectable } from '@angular/core';
 import { Headers, Http, Response } from '@angular/http';

 import { Observable } from "rxjs/Observable";
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';

 import 'rxjs/add/operator/toPromise';
 import 'rxjs/add/operator/map';

 import { Product } from '../model/product';

 @Injectable()
 export class ProductService {

private productsUrl = 'http://localhost:8181/api/products'; // url to web api
private producersUrl = 'http://localhost:8181/api/producers'; // url to web api

private headers = new Headers({'Content-Type': 'application/json'});

constructor(private http: Http) { }

getProducts(): Observable<Product[]>{
    return this.http.get(this.productsUrl)
    .map((res:Response) => res.json());

}

private getHeaders(){
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
}


private handleError (error: Response | any) {
// In a real world app, you might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
  const body = error.json() || '';
  const err = body.error || JSON.stringify(body);
  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
  errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}


getProduct(id: string): Observable<Product> {
    const url = `${this.productsUrl}/${id}`;
    return this.http.get(url)
    .map((res:Response) => res.json());
}

update(product: Product): Promise<Product> {
    const url = `${this.productsUrl}`;
    return this.http
    .put(url, JSON.stringify(product), {headers: this.headers})
    .toPromise()
    .then(() => product)
    .catch(this.handleError);
}

 create(product: Product): Observable<any> {
    const url = `${this.productsUrl}/${product.id}`;
    return this.http.post(url, product, {headers: this.headers})
    .map(res => res.text());
}

delete(id: string): Promise<void> {
    const url = `${this.productsUrl}/${id}`;
    return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
}
}

Any help is greatly appreciated!!

Answer 1

I've not used Spring boot - so this might not be suitable- this is how I'd do it without Spring boot. (I assume Spring boot does this)

I'm also not sure if your problem is Angular, Spring boot or mongo :)

I would associate the products to the producer - is it one product per producer? Or can a product be produced by many suppliers?

If it's a 1:1 then I would include the producer ID in the create product message. Then store it in the database.

If it's a many to many relationship then you going to need a component and service to create the relationships.

I can't see where you want to display the list either? I assume, you want to display it in the producer details page. In which case I would do a get request for the producer and their products when that component loads.

Anyway- hope there's something within that that helps.

Answer 2

Based on your estimated 20 products per producer, I'd recommend structuring your MongoDB in the following way:

Producer

{
    _id: objectId('58e655aabc8fe900119ae7a7')
    producerName: 'Test producer',
    products: [
        ObjectId('593b28e80000000000000000')
    ]
}

Products

{
    _id: ObjectId('593b28e80000000000000000'),
    productName: 'Test product'
}

Then when you insert a product into your product collection, push it to the producers products array. Then in your application you can select all products for a producer.