title: How to fix "Cannot read property 'title' of undefined"
body: <p>I'm following Mosh Hamedani tutorial "Angular 4: Beginner to Pro". </p>
  
  <p>I'm trying to show the title of a product in a form when trying to edit it.
  The product is stored in a firebase database.
  I'm new to Angular.</p>
  
  <p>However, I'm getting this error in the console when I go to the edit form</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'title' of undefined
      at Object.eval [as updateDirectives] (ProductFormComponent.html:7)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
      at checkAndUpdateView (core.js:23307)
      at callViewAction (core.js:23548)
      at execComponentViewsAction (core.js:23490)
      at checkAndUpdateView (core.js:23313)
      at callViewAction (core.js:23548)
      at execEmbeddedViewsAction (core.js:23511)
      at checkAndUpdateView (core.js:23308)
      at callViewAction (core.js:23548)
  </code></pre>
  
  <p>Here is part of my form :</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label for="title"&gt;Title&lt;/label&gt;
              &lt;input #title="ngModel" [(ngModel)]="product.title" &lt;== error here
  name="title" id="title" type="text" class="form-control" required&gt;
              &lt;div class="alert alert-danger" *ngIf="title.touched &amp;&amp; title.invalid"&gt;
                Title is required
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>And here is the product-form.component.ts</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { CategoryService } from 'src/app/category.service';
  import { ProductService } from 'src/app/product.service';
  import { Router, ActivatedRoute } from '@angular/router';
  import { take } from 'rxjs/operators';
  
  @Component({
    selector: 'app-product-form',
    templateUrl: './product-form.component.html',
    styleUrls: ['./product-form.component.css']
  })
  export class ProductFormComponent implements OnInit {
  
    categories$;
    product;
  
    constructor(
      categoryService: CategoryService,
      private route: ActivatedRoute,
      private productService: ProductService,
      private router: Router) {
      this.categories$ = categoryService.getCategories();
  
      let id = this.route.snapshot.paramMap.get('id');
       if (id) this.productService.get(id).snapshotChanges().pipe(take(1))
  .subscribe(p =&gt; this.product = p); &lt;== this does not seem to be working
    }
  
    save(product) {
      this.productService.create(product);
      this.router.navigate(["/admin/products"]);
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>What can I do to show the product's title?</p>