Angular error- "The left-hand side of an assignment expression may not be an optional property access.ts"?

user_14614793 0
Viewed 17358

In my Angular typescript file I have following code. I need help to solve this typescript error

ngAfterViewInit() {
 setTimeout(() => {
 this.tada = document.querySelectorAll('.highlighted').length;
document.querySelector<HTMLElement>('.highlighted')?.style.backgroundColor = 'pink';->>Error
        this.fckme();
      }, 50);
    }

I am getting the following error

The left-hand side of an assignment expression may not be an optional property access.ts(2779)

I have created custom pipe where if I get loop through text and search for a word, if word is present in given text I add highlighted class to it so that, I can hilight that word with pink color

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'highlight'
})
export class HiPipe implements PipeTransform {

  transform(v1: string, v2: string): unknown {
   //some code
    for (const match of matches) {
      value = value.replaceAll(match, `<span class = "highlighted data-${match}">${match}</span>`);
    }
    return v1;
  }
}
angular typescript runtime-error
3 Answers

Just remove the question mark in

document.querySelector<HTMLElement>('.highlighted')?.style.backgroundColor = 'pink';

for the error.

It should be

if(document.querySelector<HTMLElement>('.highlighted')){
    document.querySelector<HTMLElement>('.highlighted').style.backgroundColor = 'pink';
}

Because that ? making document.querySelector('.highlighted') as optional and in the right we are assigning value to that.

But it will set the pink color in the first item that has the class 'highlighted'. So you need to loop through the elements or add a pink-color class to it. And set the background color of that class item to pink

Try the below code for changing all elements with the class highlighted.

const elements = document.querySelectorAll('.highlighted');
    if(elements.length){
      elements.forEach((item:HTMLElement) => {
        item.style.backgroundColor = 'pink';
      })
    }

Ckeck this https://stackblitz.com/edit/angular-services-example-ygmmaq?file=src/app/app.component.html

user_19211150

Try this:

This may help others for late reply.

document.querySelector<HTMLElement>('zsiq_floatmain zsiq_theme1 siq_bL')[0] ['style'].display = 'none'
user_173586860

The casting was not set right on the document object

ngAfterViewInit() {
setTimeout(() => {
//this.tada = document.querySelectorAll('.highlighted').length;
//you don't need this unless you are trying to apply the pink colour to all class with the selector above. returns an array of all elements with class highlighted
let highlight: Array<HTMLElement> = <HTMLElement>document.querySelectorAll('.highlighted');
//or let highlight:HTMLCollection[] = Array.from(document.getElementsByClassName('highlighted') as HTMLCollection<HTMLElement>)
highlight.forEach((el:HTMLElement) => {
 if(!el) return;
el.style.backgroundColor = 'pink';
});
,0}
}

Refer to this link for more info Typescript 3.7@beta Optional Chaining operator using problem

user_46304750
Related