title: Adding Data to Firebase Cloud Firestore and Angular
body: <p>First of all I have to say that I'm learning Angular. Maybe the answer is too evident but I can't see it. I've searched responses for similar questions in the web but I didn't found any that works for me.</p>
  
  <p>I made an Angular Template Driven Form to store products on my Firebase Cloud Firestore Database. I created a model called "Product"</p>
  
  <p><strong>product.ts</strong></p>
  
  <pre><code>export class Product {
  constructor(
      public code: string,
      public desc: string,
      public stock: number,
      public price: number,
      public off: number,
      public details?: string
  ) {}
  </code></pre>
  
  <p>}</p>
  
  <p>Then, I have the <strong>product.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Product } from './product';
  import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
  import { Observable } from 'rxjs/Observable';
  
  
  @Component({
      selector: 'app-admin-product',
      templateUrl: 'product.component.html'
  })
  
  export class AdminProductComponent {
  
  model = new Product('', '', 0, 0, 0);
  successMsg = 'Data successfully saved.';
  
  productsRef: AngularFirestoreCollection&lt;Product&gt;;
  product: Observable&lt;Product[]&gt;;
  
  constructor(private afs: AngularFirestore) {
      this.productsRef = this.afs.collection&lt;Product&gt;('productos');
  }
  
  save() {
      this.productsRef.add(this.model).then( _ =&gt; alert(this.successMsg));
  }
  </code></pre>
  
  <p>TypeScript doesn't return errors at all and everything seems to be ok. But when I run my app and try to save the form's data, console returns next error:</p>
  
  <blockquote>
    <p>AdminProductComponent.html:51 ERROR Error: Function CollectionReference.add() requires its first argument to be of type object, but it was: a custom Product object</p>
  </blockquote>
  
  <p>I solved it passing the custom object to a simple object like this:</p>
  
  <pre><code>const product = {
      code: this.model.code,
      desc: this.model.desc,
      stock: this.model.stock,
      price: this.model.price,
      off: this.model.off,
      details: this.model.details
  }
  </code></pre>
  
  <p>And saving data like this:</p>
  
  <pre><code>save() {
      this.productsRef.add(product).then( _ =&gt; alert(this.successMsg)); }
  </code></pre>
  
  <p>But I think that it isn't the properly solution, maybe could cause future issues scalling the app.</p>