Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide a material button?

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>
like image 615
Stéphane GRILLON Avatar asked Dec 11 '22 01:12

Stéphane GRILLON


2 Answers

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;
 }
like image 194
Farhat Zaman Avatar answered Dec 12 '22 15:12

Farhat Zaman


<button mat-raised-button class="mat-primary" (click)="deleteClick()" *ngIf="!data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>
like image 21
Stéphane GRILLON Avatar answered Dec 12 '22 14:12

Stéphane GRILLON