Refreshing Angular Emojis when using property binding

Question

I'm new to programming, so sorry if the question is stupid. I'm using Angular Emojis, i show specific emojis with a variable using property binding.

Template:

<angular-emojis [name]="emojivar" size="30" (mouseenter)="changeRoutine()" > </angular-emojis>

TypeScript code:

  emojivar = 'taco';

  changeRoutine(){
    console.log(this.emojivar);
    this.emojivar = 'tomato';
    console.log(this.emojivar);
  }

The variable changes, but the emoji doesn't change. Is there any way to fix it, to make it refresh?

Answer 1

Honestly i don't see any reason why this wouldn't work. You could try to force change detection:

consturctor(private cdr: ChangeDetectorRef) {}

changeRoutine(){
    console.log(this.emojivar);
    this.emojivar = 'tomato';
    console.log(this.emojivar);
    this.cdr.detectChanges();
}

[EDIT] I had a look at the library you are using and...it doesn't handle changes at all:

https://github.com/saqy/angular-packages/blob/master/projects/angular-emojis/src/lib/angular-emojis.component.ts