EventTarget is not able to access classList

Question

I am trying to make an expansion panel expand only when clinking the arrow, but when I try to compile it, this function

private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return (target.classList && target.classList.contains(expansionIndicatorClass) );
  }

returns the following error:

"Property 'classList' does not exist on type 'EventTarget'"

Any clues how do I get past this error or do you know any other workaround to acheive the same functionality?

I got it working on stackblitz with no errors... https://stackblitz.com/edit/basic-material-e6sh1r

No. The thing is working on stackblitz, but it doesn't compile locally.... — gothaf, Dec 27 '19 at 13:49

score 8 · Accepted Answer · answered Dec 27 '19 at 13:57

8

Using console.log({event}); and console.log({target});, you can see the following :

The EventTarget is actually MouseEvent, and the target property is not of a fixed type. You can see this post to know more on the subject : SO Post
Since the target element is a span, you can use with TypeScript the HTMLSpanElement type to help you for that.

Here is imo a cleaner solution of what is proposed as an alternative answer :

  expandPanel(matExpansionPanel: any, event: MouseEvent) {
    console.log({event});

    if (!this._isExpansionIndicator(event.target as HTMLSpanElement)) {
      matExpansionPanel.close();
    }
  }

   private _isExpansionIndicator(target: HTMLSpanElement): boolean {
    console.log({target});
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return (target.classList && target.classList.contains(expansionIndicatorClass) );
  }

answered Dec 27 '19 at 13:57

Alex Beugnet

4,003
4
23
40

1

In fact, I like your approach better than what I currently have... I think I will go with that! Thank you! – gothaf Dec 27 '19 at 14:26
1

@gothaf I also think this is more appropriate, IMO you should remove accepted from my answer and mark this answer as accepted. upvoted this answer. – Plochie Dec 27 '19 at 14:30
Ok @Plochie.. Only because you say so... :) – gothaf Dec 27 '19 at 14:36
Thank you guys!! I appreciate your help! – gothaf Dec 27 '19 at 14:36

score 4 · Answer 2 · answered Dec 27 '19 at 13:51

You need to typecast 'EventTarget' to Element, change function as follows,

private _isExpansionIndicator(target: EventTarget): boolean {
    const expansionIndicatorClass = 'mat-expansion-indicator';
    return ((<Element>target).classList && (<Element>target).classList.contains(expansionIndicatorClass) );
}

EventTarget is not able to access classList

2 Answers2