CODEWITHSUNDEEP
javascriptarraysangulartypescript
Christian Futtrup
Christian Futtrup

Reputation: 172

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. in JS map

I've been looking for a while here in StackOverflow and through Google, but couldn't really find a solution to my issue. So here it goes.

I have an array of elements in the DOM which I get through a @ViewChildren('labelSquare') public labelIcon: QueryList<HTMLSpanElement>; decorator. In the HTML I have the following to bind it:

 <span class="status-item" *ngFor="let status of statusList">
     <div *ngIf="status.state !== 'Starting' &&
                 status.state !== 'Stopping' &&
                 status.state !== 'Synchronising' &&
                 status.state !== 'EmergencyStop'"
     >
       <div class="status">
         <span #labelSquare class="status-square fas fa-square {{ status.state }}"></span>
         <span class="status-name">{{ status.text }}</span>
       </div>
     </div>
 </span>

I get an array of 58 span elements from this, and now want to append a border that has a 10% darker color than it's current background. Therefore, I'm using a map for this:

if (this.labelIcon) {
     this.labelIcon.map((icon: HTMLSpanElement) => {
         const element = window.getComputedStyle(icon);
         icon.setAttribute('style', `border: 1px solid ${ColorUtil.darkenBorderFromBackground(element.color)}`);
     });
 }

My ColorUtil.darkenBorderFromBackground() simply returns return darken(${backgroundColor}, 10%); (uses template string, couldn't figure out how to format here in StackOverflow.

My issue is now that I get a TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Can anyone help me out?

Upvotes: 0

Views: 3868

Answers (1)

Reyno
Reyno

Reputation: 6525

Angular returns an ElementRef not a DOM element.

ElementRef has a property called nativeElement which refers to the DOM element. So change icon for icon.nativeElement inside the window.getComputedStyle()

Be aware that your typescript interface also needs to change inside the map method.

E.g.

if (this.labelIcon) {
 this.labelIcon.map((icon: ElementRef) => { // Not sure if ElementRef is a valid interface in Angular
     const element = window.getComputedStyle(icon.nativeElement);
     icon.setAttribute('style', `border: 1px solid ${ColorUtil.darkenBorderFromBackground(element.color)}`);
 });
}

Upvotes: 1

Related Questions