hidden in Angular2 don't working

Question

I read that better than [hidden] use *ngIf but in my case I don't want remove element from the DOM. In component.html i have

<article #articleId id="bodyArticle" [hidden]="isClicked"></article>

in .ts file

isClicked = false;

and 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 to fix that and make that article will be invisible ?

edit

Now it's working but now when i try use

var myArticle = document.querySelector('article');
myArticle.textContent = this.imageService.getBodyRes();

I have error that undefined Why is this happening if article is don't remove from DOM ?

Answer 1

There really is nothing wrong with using the hidden attribute, but if you would still like to avoid it, you could simply assign a class to the element instead.

<article #articleId id="bodyArticle" [class.hidden]="isClicked"></article>

Change the CSS accordingly:

article.hidden {
  display: none !important;
}

Answer 2

Instead of trying to use [hidden] you can do something like:

CSS:

.hidden { 
  visibility: none
}

then in your HTML:

<article #articleId id="bodyArticle" [class.hidden]="isClicked"></article>

Answer 3

You don't need to do that through a css class. You can use the [hidden] property to show or hide the element.

The mistake you are doing is that [hidden] will have an affect when condition is true. You in your case you just need to invert your isClicked variable.

<article #articleId id="bodyArticle" [hidden]="!isClicked"></article>

Also, remove the following from your css:

[hidden]{display:none!important}