Angular method call from a external control function

Question

I am using the tag feature of ng-select but getting the problem when I call an angular component method from a control function. I want to call this.isValidTag(tag) and this.modalService.warn from the addTagFn(tag)

Here is the html template

<div class="modal-header">
  <h5 class="modal-title">{{ headingKey | translate }}</h5>
  <button type="button" class="close" attr.aria-label="{{ 'common.actions.close' | translate }}"
    (click)="activeModal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body p-0">
  <div class="input-group">
    <label class="input-group-prepend" for="tag-keywords"><i class="fa fa-search" aria-hidden="true"></i></label>
    <ng-select labelForId="tag-keywords" [items]="tagsFound" notFoundText="{{ 'common.not-found' | translate }}"
      class="tag-keywords" loadingText="{{ 'common.loading' | translate }}" [hideSelected]="true" [selectOnTab]="true"
      multiple="true" bindLabel="name" [loading]="searching" [addTag]="addTagFn"
      (focus)="onTagFocus()" (search)="onTagSearch($event.term)" [(ngModel)]="selectedTags">
      <ng-template ng-tag-tmp let-search="searchTerm">
        <strong>{{ 'ideas.tags.form.create' | translate }}</strong>{{search}}
      </ng-template>
    </ng-select>
  </div>
  <div class="tag-search-results"></div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary"
    (click)="activeModal.close(selectedTags)">{{ 'common.actions.save' | translate }}</button>
</div>

and here is the component

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import { DismissOnRouteChangeModalBase } from '@app/shared/dismiss-on-route-change-modal-base';
import { Router } from '@angular/router';
import { ModalService } from '@app/shared/modal/modal.service';

@Component({
  templateUrl: './add-tags-modal.component.html',
  styleUrls: ['./add-tags-modal.component.scss']
})
export class AddTagsModalComponent extends DismissOnRouteChangeModalBase {
  headingKey: string;
  searching = false;
  tags: string[] = [];
  tagsFound: string[] = [];
  searchForTags: (keywords: string) => Observable<string[]>;
  selectedTags;

  constructor(router: Router, public activeModal: NgbActiveModal, private modalService: ModalService) {
    super(router, activeModal);
  }

  addTagFn(tag) {
    tag = tag.trim();

    if (!this.isValidTag(tag)) { // not working
      this.modalService.warn('ideas.tags.form.invalid-format'); // not working
      return;
    }

    if (this.tags.indexOf(tag) !== -1) { // not working
      return;
    }

    this.tags.push(tag);

    return tag;
  }

  onTagFocus() {
    if (this.tags.length === 0) {
      this.searching = true;
      this.searchForTags('').subscribe(results => {
        this.tags = results;
        this.tagsFound = this.tags;
        this.searching = false;
      });
    } else {
      this.tagsFound = this.tags;
    }
  }

  onTagSearch(query: any) {
    this.searching = true;
    this.searchForTags(!query ? '' : query).subscribe(results => {
      this.tagsFound = results;
      this.searching = false;
    });
  }

  isValidTag(tag: string): boolean {
    if (tag === null || tag === '' || tag.indexOf(' ') !== -1) {
      throw new Error('tag should not be null or empty');
    }

    return tag.indexOf(',') === -1;
  }
}

Answer 1

The solution/workaround for this issue is to use .bind(this):

[addTag]="addTagFn.bind(this)"

Source: https://github.com/angular/angular/issues/14129#issuecomment-353386470