I can't seem to figure out how to handle the error thrown by renderer2.selectRootElement in my current project. Here is a snippet of my code:
private doSomeAnimation(){
const modalWrapper = this.renderer2.selectRootElement('.modal-wrapper', true);//This is where it fails
// finally do something with modalWrapper
this.renderer2.addClass(modalWrapper, 'fade-out');
}
Upon checking the console, I came across this error message:
global-angular-error-handler.service.ts:49 Error: The selector ".modal-wrapper" did not match any elements
at DefaultDomRenderer2.selectRootElement (dom_renderer.ts:146)
at BaseAnimationRenderer.selectRootElement (animation_renderer.ts:156)
at DebugRenderer2.selectRootElement (services.ts:762)
at ModalComponent.animateClosing (modal.component.ts:39)
....
I also consulted the Renderer2 documentation and found that the selectRootElement method works like this:
selectRootElement(selectOrNode: string|any):any{
let el: any = typeof selectOrNode === 'string'? document.querySelector(selectOrNode) : selectOrNode;
if(!el){
throw new Error(`The selector "${selectorOrNode}" did not match any elements`);
}
el.textContent = '';
return el;
}
It's clear that the error occurs at line one of my function. So, my main concern is how to prevent the error message from displaying in the console when no matches are found. Specifically, I want to avoid showing this particular message:
"The selector ".modal-wrapper" did not match any elements"
If anyone could offer some guidance or assistance on resolving this issue, it would be greatly appreciated. Thank you!