<div [hidden]="flagValue">
---content---
</div>

<div [hidden]="myExpression">

myExpression可以设置为true或false

在引导4.0中，类"d-none" = "display: none!important;"

<div [ngClass]="{'d-none': exp}"> </div>

[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"

要隐藏和显示div在按钮上单击angular 6。

Html代码

<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
   <table>
      <tr>
         <td>Name</td>
         <td>Ram</td>
      </tr>
   </table>
</div>

AppComponent。ts代码

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent{
   isShow=false;
   toggleElement():void
   {
      this.isShow = !this.isShow
   }
}

这适用于我，它是一种替代ng-hide和ng-show在angular2+的方法

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"