There is a common suggestion to use *ngIf better than [hidden] but in my scenario, I want to keep the element in the DOM without it being visible. In my component.html file, I have:
<article #articleId id="bodyArticle" [hidden]="isClicked"></article>
In my .ts file:
isClicked = false;
and in the CSS:
article {
width: 500px;
margin: 0 auto;
background-size: cover;
overflow-wrap: break-word;
justify-content: center;
height: 500px;
overflow-y: scroll;
}
[hidden]{display:none!important}
How can I make the article invisible while still keeping it in the DOM?
Edit:
I managed to make it work, but now when I try to do this:
var myArticle = document.querySelector('article');
myArticle.textContent = this.imageService.getBodyRes();
I get an error saying it's undefined. Why would this happen if the article is not removed from the DOM?