# Cannot read properties of undefined (reading ‘title’) 2

**URL:** <https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303>\
**Category:** Angular\
**Created:** [November 5, 2022, 3:00pm UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303 "2022-11-05T15:00:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [November 5, 2022, 3:00pm UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/1 "2022-11-05T15:00:29Z")

</div>

Dear Mr. Jason & everyone

I am getting this error

the add new-product page is not working  
I appreciate any help, I am stuck here for two weeks…

 ![cantReadUndefined](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/2/2ae93d71f89cbe1968ecae12451046e482e93508.jpeg)  
 ![newProduct](https://us1.discourse-cdn.com/flex020/uploads/codewithmosh/original/2X/b/b16560b5c27228bee14853ece08897c1c1bf1c00.jpeg)

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [November 5, 2022, 6:11pm UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/2 "2022-11-05T18:11:39Z")

</div>

As usual going to need to see the code for the relevant HTML and Typescript files to see what might be going wrong.

---

<div class="post-metadata">

**Author:** ![amgo85](https://avatars.discourse-cdn.com/v4/letter/a/8e8cbc/32.png) [@amgo85](https://forum.codewithmosh.com/u/amgo85)\
**Post date:** [November 6, 2022, 3:41am UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/3 "2022-11-06T03:41:35Z")

</div>

by all means

```auto
// product-form.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CategoryService } from 'src/app/category.service';
import { Product } from 'src/app/models/product';
import { ProductService } from 'src/app/product.service';
import { tap } from 'rxjs/operators';
import { Observable, Subscription } from 'rxjs';
import { AngularFireList } from 'angularfire2/database';
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, OnDestroy {
  categories$!: { title: string; }[] | any;
  categories!: { title: string; }[] | any;
  subscription!: Subscription;
  subscription$!: Subscription;
  product: any;
  id;
  //product = {};

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService, 
    private productService: ProductService) { 
      
      /*
      this.subscription = this.categoryService.getCategories().subscribe( categories => {
        this.categories = categories;
      }); */

      this.categories$ = categoryService.getCategories();
      //this.categories$ = this.categoryService.getCategoriesValueChanges();

      /*this.subscription$ = this.categoryService.getCategoriesValueChanges().subscribe( categories => {
        this.categories$ = categories;
      }); */
      //this.categories$ = this.categoryService.getCategoriesValueChanges();

      this.id = this.route.snapshot.paramMap.get('id');
      if(this.id) this.productService.get(this.id).pipe(take(1)).subscribe(p => this.product = p );

  } // no need to add the private access modifier as we are not going to reference this anywhere outsde the constructor

save(product: Product){ // I added HTMLInputElement from my own
  console.log(product);
  if(this.id) this.productService.update(this.id, product);
  else this.productService.create(product);

  this.router.navigate(['/admin/products']);
}

  ngOnInit(): void {
    this.categories = this.categoryService.getCategories()
                                        .pipe(tap(c => console.log("category =", c)));
  }

  ngOnDestroy() {
    //this.subscription.unsubscribe();
    //this.subscription$.unsubscribe();
  }

}

```

```auto
// product-form.component.html
<div class="row">
    <div class="col-md-6">
        <form #f="ngForm" (ngSubmit)="save(f.value)">
            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">Title is required</div>
            </div>
            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                    <input #price="ngModel" [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" [min]="0" required>
                </div>
                <div class="alert alert-danger" *ngIf="price.touched && price.invalid">
                    <div *ngIf="price.errors.required">Price is required</div>
                    <div *ngIf="price.errors.min">Minimun Price should be 0 or higher</div>
                </div>
            </div>
            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" [(ngModel)]="product.category" name="category" id="category" class="form-control" required>
                    <option value=""></option>
                    <option *ngFor="let c of categories$ | async" [value]="c.key">{{c.data.name}}</option>
                </select>
                <div class="alert alert-danger" *ngIf="category.touched && category.invalid">Category is required</div>
            </div>
            <div class="form-group">
                <label for="imageUrl">Image</label>
                <input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" url required>
                <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                    <div *ngIf="imageUrl.errors.required">Image Url is required</div>
                    <div *ngIf="imageUrl.errors.url">Please enter a valid URL</div>
                </div>
            </div>
            <button class="btn btn-primary">Save</button>
        </form>
    </div>
    <div class="col-md-6">
        <div class="card" style="width: 18rem;">
            <img [src]="product.imageUrl" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">{{product.title}}</h5>
              <p class="card-text">{{product.price | currency:'USD':true }}</p>
            </div>
          </div>
    </div>
</div>

```

```auto
// product.service
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { map } from 'rxjs/operators';
import { Product } from './models/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  product!: Product;

  constructor(private db: AngularFireDatabase) { }

  create(product: Product){
    this.db.list('/products').push(product);
  }

  getAll() {
    return this.db.list('/products').snapshotChanges().pipe(map(actions => {
      return actions.map(a => {
        const key = a.payload.key;
        const data = a.payload.val();
        return {data, key};
      })
    }));
  }

  get(productId: string) {
    return this.db.object('/products/' + productId).valueChanges();
  }

  update(productId: string, product: Product){
    return this.db.object('/products/' + productId).update(product);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jmrunkle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jmrunkle/32/3765_2.png) [@jmrunkle](https://forum.codewithmosh.com/u/jmrunkle)\
**Post date:** [November 6, 2022, 7:00am UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/4 "2022-11-06T07:00:06Z")

</div>

So I think you are either seeing what happens when this if condition is false or a race condition

> [@amgo85](#):
>
> `if(this.id) this.productService.get(this.id).pipe(take(1)).subscribe(p => this.product = p );`

It could also be a simple race where product has not been assigned yet.

Either way, I think you need an ngIf to check if product is assigned a value before you try to use it in your template.

---

<div class="post-metadata">

**Author:** ![Chaitanya5](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/chaitanya5/32/4915_2.png) [@Chaitanya5](https://forum.codewithmosh.com/u/Chaitanya5)\
**Post date:** [November 18, 2022, 1:07pm UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/5 "2022-11-18T13:07:30Z")

</div>

Hi,

i have the same issue. can you help me

---

<div class="post-metadata">

**Author:** ![Samaty](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Samaty](https://forum.codewithmosh.com/u/Samaty)\
**Post date:** [November 19, 2022, 9:25am UTC](https://forum.codewithmosh.com/t/cannot-read-properties-of-undefined-reading-title-2/16303/6 "2022-11-19T09:25:05Z")

</div>

hi,  
I think this has to do with TS compiler. In “your product-form.component.ts” file the type of the property ‘product’ is any. You should try giving it the ’ Product’ type like this:

product: Product;

this way the compiler will know that title is a property of the product object.