Angular 6 - Unable to run external functions inside a particular function
You are passing a reference to an object method, but the value of this
is not being set. So you need to bind(this)
to the function reference.
public addTagNowRef: (name)=>void;
constructor(public afs: AngularFirestore) {
this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
this.addTagNowRef = this.addTagNow.bind(this);
}
Then use that property in the template.
<ng-select [(ngModel)]="client.categoryId"
class="form-control"
[ngClass]="{'is-invalid':clientCategoryId.errors && clientCategoryId.touched}"
#clientCategoryId="ngModel"
name="categoryId"
[addTag]="addTagNowRef"
required>
<ng-option *ngFor="let cat of cats" [value]="cat.id">{{cat.title}}</ng-option>
</ng-select>
Alternatively, you can use an arrow function to forward the call to the method.
public addTagNowRef: (name)=>void;
constructor(public afs: AngularFirestore) {
this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
this.addTagNowRef = (name) => this.addTagNow(name);
}
The point here is that this
must reference the component.