2

I have created a template reference variable on an input field called #newSkill. In the addToSkill() method, I'm passing it as a parameter, and it works fine.

However, in the chooseSkill() method that gets called with the click function of my list items, newSkill is undefined. Why is that? I don't see why there should be a difference between these two methods. There's probably some obvious mistake in my code, but I can't spot it. Any help is appreciated.

HTML:

<li id="skillInput">
    <input *ngIf="canEdit()" #newSkill type="text" class="skillInputField" placeholder="Type your skills here" (keydown.enter)="addToSkill(newSkill)"
(keyup)="findSkill($event)">

    <span *ngIf="canEdit()" class="addBtn" (click)="addToSkill(newSkill)"></span>
</li>
<ul>
    <li #selectedSkill class="skillItem" *ngFor="let skill of skillSearchResult" (click)="chosenSkill(selectedSkill.innerText, newSkill)">
        {{skill}}
    </li>
</ul>

TS:

addToSkill(newSkill: HTMLInputElement) {
console.log(newSkill);
let value = newSkill.value;
//Check for being empty, whitespace and duplicate
if (value && value.trim().length && !this.skillArray.find(x => x.name == value)) {
  this._userService.addSkill({ userID: parseInt(localStorage.getItem('currentUserId')), name: value, level: "low" })
  .subscribe(
    result => {
      if(result == true){
        //success
        this.skillArray.push({ userID: parseInt(localStorage.getItem('currentUserId')), name: value, level: "low" });
      } else {
        //faliure
      }
    },
      err => {
        console.log(err);
      }
  )
}
newSkill.value = '';
}


chooseSkill(selectedSkill: string, newSkill: HTMLInputElement) {

if (selectedSkill && selectedSkill.trim().length && !this.skillArray.find(x => x.name == selectedSkill)) {
  console.log(selectedSkill);

  this._userService.addSkill({ userID: parseInt(localStorage.getItem('currentUserId')), name: selectedSkill, level: "low" })
  .subscribe(
    result => {
      if(result == true){
        //success
        this.skillArray.push({ userID: parseInt(localStorage.getItem('currentUserId')), name: selectedSkill, level: "low" });
        //Remove from search result list when clicked
        this.skillSearchResult.splice(this.skillSearchResult.indexOf(selectedSkill), 1);
      } else {
        //faliure
      }
    },
      err => {
        console.log(err);
      }
  )
}
// Input field empty
newSkill.value = "";

}

UPDATE:

It seems like the *ngIf on #newSkillis the problem. When I remove it, it works. Any idea why? Doesn't make any sense to me. The condition is obviously true since I can write in the input. I also tried printing the value of canEdit(), which was true.

UPDATE 2:

I found a workaround. I changed the *ngIf to [hidden]. I still have no clue why *ngIf did not work here.

Jesper
  • 2,644
  • 4
  • 30
  • 65
  • 1
    Does this answer your question? [How do I combine a template reference variable with ngIf?](https://stackoverflow.com/questions/44811132/how-do-i-combine-a-template-reference-variable-with-ngif) – John Montgomery May 27 '20 at 17:36
  • I was thinking it could be something about the variable scope, with the John M. comment I think it's correct.. – Gustavo Amaro Jun 08 '20 at 14:47