title: TypeError: Cannot read property 'indexOf' of undefined Angular
body: <p>I'm making a MEAN stack app and I get this error:</p>
  
  <pre><code>TypeError: Cannot read property 'indexOf' of undefined.
  </code></pre>
  
  <p>The problem seems to be in this line:</p>
  
  <pre><code>&lt;div *ngIf="newComment.indexOf(product._id) &gt; -1"&gt;
  </code></pre>
  
  <p>I defined the newComment as a variable in the component like this:</p>
  
  <pre><code>newComment = [];`
  </code></pre>
  
  <p>So it should be defined. Anybody who can help?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>As requested the enire files.</p>
  
  <p>product.component.html (div is at the end)</p>
  
  <pre><code>&lt;h1 class="pb-2 mt-4 mb-2 border-bottom"&gt;Producten&lt;/h1&gt;
  
  &lt;div class="row show-hide-message" *ngIf="message &amp;&amp; newProduct"&gt;
    &lt;div [ngClass]="messageClass"&gt;
      {{ message }}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()"&gt;Nieuwe productvraag&lt;/button&gt;
  &lt;button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"&gt;&lt;i class="fas fa-sync-alt"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;Reload&lt;/button&gt;
  &lt;div&gt;&lt;br&gt;&lt;/div&gt;
  
  &lt;form [formGroup]="form" name="productForm" (submit)="onProductSubmit()" *ngIf="newProduct"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="title"&gt;Titel&lt;/label&gt;
          &lt;div&gt;
            &lt;input type="text" name="title" class="form-control" placeholder="*Product Titel" autocomplete="off" formControlName="title" /&gt;
            &lt;ul class="help-block text-danger" *ngIf='form.get("title").touched'&gt;
              &lt;li *ngIf='form.get("title").errors?.required'&gt;Dit veld is verplicht&lt;/li&gt;
              &lt;li *ngIf='form.get("title").errors?.minlength || form.get("title").errors?.maxlength'&gt;Max lengte: 50, Min lengte: 2&lt;/li&gt;
              &lt;li *ngIf='form.get("title").errors?.alphaNumericValidation'&gt;Mag enkel letters of nummers bevatten&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label for="body"&gt;Vraag&lt;/label&gt;
          &lt;div&gt;
            &lt;textarea name="body" rows="8" cols="80" placeholder="*Beschrijving" class="form-control" formControlName="body"&gt;&lt;/textarea&gt;
            &lt;ul class="help-block text-danger" *ngIf='form.get("body").touched'&gt;
              &lt;li *ngIf='form.get("body").errors?.required'&gt;Dit veld is verplicht&lt;/li&gt;
              &lt;li *ngIf='form.get("body").errors?.minlength || form.get("body").errors?.maxlength'&gt;Max lengte: 500, Min lengte: 5&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;button [disabled]="processing" type="button" name="button" (click)="goBack()" class="btn btn-warning"&gt;Terug&lt;/button&gt;
        &lt;button [disabled]="processing || !form.valid" type="submit" name="button" class="btn btn-success"&gt;Plaats&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div *ngIf="!newProduct"&gt;
    &lt;div *ngFor="let product of producten"&gt;
      &lt;div class="card"&gt;
        &lt;div class="card-header"&gt;
          &lt;h3&gt;{{ product.title }}&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;p class="card-text"&gt;
              {{ product.body }}
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
            &lt;strong&gt;Gepost door: &lt;/strong&gt; {{ product.createdBy }}
            &lt;br&gt;
            &lt;strong&gt;Datum: &lt;/strong&gt; {{ product.createdAt | date:'dd-MM-yyyy' }}
            &lt;br&gt;
            &lt;div *ngIf="username === product.createdBy"&gt;
                &lt;strong&gt;Likes: &lt;/strong&gt;{{ product.likes }}
            &lt;/div&gt;
            &lt;br&gt;
            &lt;a [routerLink]="['/bewerkProduct/', product._id]" *ngIf="username === product.createdBy"&gt;&lt;button type="button" name="button" class="btn btn-sm btn-info"&gt;Bewerken&lt;/button&gt;&lt;/a&gt;
            &lt;a [routerLink]="['/verwijderProduct/', product._id]" *ngIf="username === product.createdBy"&gt;&lt;button type="button" name="button" class="btn btn-sm btn-danger"&gt;Verwijderen&lt;/button&gt;&lt;/a&gt;
            &lt;div class="dropdown"&gt;
              &lt;button type="button" name="button" class="btn btn-sm btn-success" *ngIf="username !== product.createdBy" (click)="likeProduct(product._id)"&gt;
                  &lt;i class="fas fa-thumbs-up"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;{{ product.likes }}
              &lt;/button&gt;
              &lt;div class="dropdown-content"&gt;
                &lt;a href="#"&gt;Jana&lt;/a&gt;&lt;br&gt;
                &lt;a href="#"&gt;Evelyn&lt;/a&gt;&lt;br&gt;
                &lt;a href="#"&gt;Noelle&lt;/a&gt;&lt;br&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item"&gt;
            &lt;button [disabled]="newComment.indexOf(product._id) &gt; -1" type="button" name="button" class="btn btn-sm btn-danger" (click)="comment(product._id)"&gt;Comment&lt;/button&gt;&lt;br&gt;
            &lt;div *ngIf="newComment.indexOf(product._id) &gt; -1"&gt;
              &lt;form [formGroup]="commentForm"&gt;
                  &lt;textarea name="comment" rows="10" cols="30" class="form-control" formControlName="comment"&gt;&lt;/textarea&gt;
                  &lt;div [ngClass]=""&gt;
                      &lt;ul class="help-block text-danger" *ngIf='commentForm.get("comment").touched'&gt;
                          &lt;li *ngIf='commentForm.get("comment").errors?.required'&gt;Dit veld is verplicht&lt;/li&gt;
                          &lt;li *ngIf='commentForm.get("comment").errors?.minlength || form.get("title").errors?.maxlength'&gt;Max lengte: 200, Min lengte: 1&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
                  &lt;button [disabled]="!commentForm.valid || processing" type="submit" name="button" class="btn btn-sm btn-info" (click)="postComment(product._id)"&gt;Plaats comment&lt;/button&gt;
                  &lt;button [disabled]="processing" type="button" name="button" class="btn btn-sm btn-danger" (click)="cancelSubmission(product._id)"&gt;Cancel&lt;/button&gt;
                &lt;/form&gt;
            &lt;/div&gt;
            &lt;li *ngIf="enableComments.indexOf(product._id) === -1 &amp;&amp; product.comments.length &gt; 0" class="list-group-item"&gt;
              &lt;span (click)="expand(product._id)"&gt;Toon comments&amp;nbsp;&amp;nbsp;
                  &lt;i class="fas fa-comment"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;/li&gt;
            &lt;li *ngIf="enableComments.indexOf(product._id) &gt; -1" class="list-group-item"&gt;
              &lt;span (click)="collapse(product._id)"&gt;Verberg comments&amp;nbsp;&amp;nbsp;
                  &lt;i class="fas fa-comment-slash"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;/li&gt;
            &lt;div *ngIf="enabledComments.indexOf(product._id) &gt; -1"&gt;
              &lt;li *ngFor="let comment of blog.comments" class="list-group-item"&gt;
                &lt;strong&gt;{{ comment.commentator }}: &lt;/strong&gt; {{ comment.comment}}
              &lt;/li&gt;
            &lt;/div&gt;
          &lt;!-- &lt;/li&gt; --&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>product.compontent.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { AuthService } from '../../services/auth.service';
  import { ProductService } from '../../services/product.service';
  
  @Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
  })
  export class ProductComponent implements OnInit {
  
    messageClass;
    message;
    newProduct = false;
    loading = false;
    form;
    processing;
    username;
    producten;
    newComment = [];
    commentForm;
    enabledComments = [];
  
    constructor(
      private formBuilder: FormBuilder,
      private authService: AuthService,
      private productService: ProductService
    ) {
      this.createNewProductForm();
      this.createCommentForm();
     }
  
    createNewProductForm() {
      this.form = this.formBuilder.group({
        title: ['', Validators.compose([
          Validators.required,
          Validators.maxLength(50),
          Validators.minLength(2),
          this.alphaNumericValidation
        ])],
        body: ['', Validators.compose([
          Validators.required,
          Validators.maxLength(500),
          Validators.minLength(5)
        ])]
      });
    }
  
    createCommentForm() {
      console.log(this.newComment);
      this.commentForm = this.formBuilder.group({
        comment: ['', Validators.compose([
          Validators.required,
          Validators.minLength(1),
          Validators.maxLength(200)
        ])]
      });
    }
  
    disableFormNewProductForm() {
      this.form.get('title').disable();
      this.form.get('body').disable();
    }
  
    enableFormNewProductForm() {
      this.form.get('title').enable();
      this.form.get('body').enable();
    }
  
    enableCommentForm() {
      this.commentForm.get('comment').enable();
    }
  
    disableCommentForm() {
      this.commentForm.get('comment').disable();
    }
  
    alphaNumericValidation(controls) {
      const regExp = new RegExp(/^[a-zA-Z0-9 ]+$/);
      if (regExp.test(controls.value)) {
        return null;
      } else {
        return { 'alphaNumericValidation': true};
      }
    }
  
    newProductForm() {
      this.newProduct = true;
      this.createNewProductForm();
    }
  
    reload() {
      this.loading = true;
      // Get producten
      this.getAllProducts();
      setTimeout(() =&gt; {
        this.loading = false;
      }, 4000);
    }
  
    comment(id) {
      this.newComment = [];
      this.newComment.push(id);
    }
  
    cancelSubmission(id) {
      const index = this.newComment.indexOf(id);
      this.newComment.splice(index, 1);
      this.commentForm.reset();
      this.enableCommentForm();
      this.processing = false;
    }
  
    onProductSubmit() {
      this.processing = true;
      this.disableFormNewProductForm();
  
      const product = {
        title: this.form.get('title').value,
        body: this.form.get('body').value,
        createdBy: this.username
      };
  
      this.productService.newProduct(product).subscribe(data =&gt; {
        if (!data.succes) {
          this.messageClass = 'alert alert-danger';
          this.message = data.message;
          this.processing = false;
          this.enableFormNewProductForm();
        } else {
          this.messageClass = 'alert alert-success';
          this.message = data.message;
          this.getAllProducts();
          setTimeout(() =&gt; {
            this.newProduct = false;
            this.processing = false;
            this.message = false;
            this.form.reset();
            this.enableFormNewProductForm();
          }, 2000);
        }
      });
    }
  
    goBack() {
      window.location.reload();
    }
  
    getAllProducts() {
      this.productService.getAllProducts().subscribe(data =&gt; {
        this.producten = data.producten;
      });
    }
  
    likeProduct(id) {
      this.productService.likeProduct(id).subscribe(data =&gt; {
        console.log(data);
        this.getAllProducts();
      });
    }
  
    postComment(id) {
  
    }
  
    expand(id) {
      this.enabledComments.push(id);
    }
  
    collapse(id) {
      const index = this.enabledComments.indexOf(id);
      this.enabledComments.splice(index, 1);
    }
  
    ngOnInit() {
      this.authService.getProfile().subscribe(profile =&gt; {
        this.username = profile.user.username;
      });
      this.getAllProducts();
    }
  
  }
  </code></pre>