How to hide a material button?

Question

I want to hide my Material button but it doesn't work.

My button is grey (OK):

<button mat-raised-button class="mat-primary" (click)="deleteClick()" [disabled]="data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

My button is displayed (OK isn't hidden):

<button mat-raised-button class="mat-primary" (click)="deleteClick()" [hidden]="data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

Answer 1

you can hide your mat-button by these methods

Method 1:

<button mat-button [hidden]="true">Basic</button>

in scss file

[hidden] {
  display: none !important;
}

Method 2:

By using *ngIf which is recommended by @leopal

<button mat-raised-button class="mat-primary" (click)="deleteClick()" *ngIf="!data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

Method 3: By using Style, visibility will take his place on view but element will not be shown

<button mat-button [style.visibility]="true ? 'hidden': 'visible'">Basic</button>

or you can use style.display

<button mat-button [style.display]="true ? 'none': ''">Basic</button>

Method 4:

You can use Class property

<button mat-button [class.is-hidden]="true">Basic</button>

and in your scss file

.is-hidden {
      display: none;
 }

Answer 2

<button mat-raised-button class="mat-primary" (click)="deleteClick()" *ngIf="!data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>