Compare HTMLElement with ElementRef

Question

I am working in angular 5. I am invoking a function on keyup and passing an event to it. I also have another reference like this

@ViewChildren('list') list: QueryList<ElementRef>;

I am trying to check their ids and based on that do something.

But I am getting an error as

[ts] Operator '===' cannot be applied to types 'string' and 'HTMLAnchorElement'

Can someone tell me how to typecast and check their ids. Thanks. I am new to this.

handleEvent(event: KeyboardEvent) {
const tabKey = 9;
if (event.keyCode === tabKey && !event.shiftKey) {
  const el: HTMLElement = event.target as HTMLElement;

  if (el.id === <HTMLAnchorElement>this.list.first.nativeElement.id) {

    }
  }
}

could you please provide your HTML code as well? i do not think its necessary to typecast it as HTMLAnchorElement. if you provide id in your HTML for the relevant element, you should be able to access it like, this.list.first.nativeElement.getAttribute('id') and do a standard string comparison. — reddevilzee, Oct 26 '18 at 20:23

score 1 · Accepted Answer · answered Oct 26 '18 at 20:18

1

you can try

if (el.id === this.list.first.nativeElement.id)

and should be able to compare!

answered Oct 26 '18 at 20:18

alokstar

499
2
7

Compare HTMLElement with ElementRef

1 Answers1