title: Angular 6 - Unable to run external functions inside a particular function
body: <p>I'm using ng-select for angular 6.</p>
  
  <p>This is the HTML side of it:</p>
  
  <pre><code>        &lt;ng-select [(ngModel)]="client.categoryId"
                     class="form-control"
                     [ngClass]="{'is-invalid':clientCategoryId.errors &amp;&amp; clientCategoryId.touched}"
                     #clientCategoryId="ngModel"
                     name="categoryId"
                     [addTag]="addTagNow"
                     required&gt;
            &lt;ng-option *ngFor="let cat of cats" [value]="cat.id"&gt;{{cat.title}}&lt;/ng-option&gt;
          &lt;/ng-select&gt;
  </code></pre>
  
  <p>And this is the typescript:</p>
  
  <pre><code>nCategory: Category = {
    title: ''
  };
  
  constructor(public afs: AngularFirestore) {
    this.categoriesCollection = this.afs.collection('categories', ref =&gt; ref.orderBy('title', 'asc'));
  }
  
  addTagNow(name) {
    this.nCategory.title = name;
    this.categoriesCollection.add(this.nCategory);
  }
  </code></pre>
  
  <p>This is the error:</p>
  
  <p><code>NgSelectComponent.html:91 ERROR TypeError: Cannot set property 'title' of undefined
      at NgSelectComponent.push../src/app/components/edit-client/edit-client.component.ts.EditClientComponent.addTagNow [as addTag] (edit-client.component.ts:169)</code></p>
  
  <p>If I run the code outside of <code>AddTagNow</code> function it works perfectly fine.  </p>
  
  <p>How can I execute that code?</p>