尽管我们使用显示 css 属性，但如何使用 [hidden] 属性隐藏 DOM 元素？

Question

 public hide(){ this.show =.this;show; }

 .h1{ display: flex; }

 <button (click)="hide()">Hide/Show</button> <h1 class="h1" [hidden]="!show"> Hide me! </h1>

Here is the Problem. I have set a function for hide the DOM element. So If I click the button text will be hide. Its OK. but problem is I want to use display: flex; if I use this CSS property hide is not working. If I remove display css property definitely text will be hide

1. I want to hide the text using [hidden]=""
2. I want to use display:flex

using this both how can I hide the text, Have a any way to do this? If not why?

Answer 1

In your css:

h1 {
  display: flex;
}

h1[hidden] {
  display: none;
}