CODEWITHSUNDEEP
cssangularresponsive-designangular-material
Sudu
Sudu

Reputation: 1

Why does the angular material design disappear when I add a custom angular class to a button?

I am trying to add a custom css class directive to my button, but whenever I do that, the angular material design goes away and the button goes back to its default ugly state. How can I make sure that my custom css class gets added to the button without it removing the mat-buutton effects?

<button 
  mat-button
  [class]="todoItems.completed ? 'delete': null"
  (click)="deleteTodo(todoItems._id)" 
  [disabled]="!todoItems.completed">
          <mat-icon >delete</mat-icon>
</button>

Here is the css

.delete:hover {
   color: red
}

I want my class to be applied only if the completed property is true and when that property is true the delete button will turn red when I hover on it. The hovering part works fine but the problem I have is that the material design disappears and it turns into the default style of button

Upvotes: 0

Views: 1049

Answers (1)

Zze
Zze

Reputation: 18835

mat-button applies its own css classes to the <button> at run time.

When you are doing [class]="todoItems.completed ? 'delete': null" it is hard overridding these classes.

To append your class to the existing ones, you need to use ngClass instead.

Upvotes: 1

Related Questions