CODEWITHSUNDEEP
cssangularangular-materialcss-selectors
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17432

How to apply style by Id for element when using ::ng-deep selector

I have two checkbox of angular-material. I want to apply different style for both checkbox using ::ng-deep selector.

This is my code

<section class="example-section">
<mat-checkbox id=" #matCh" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id=" #matCh2"  class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

This is style

<style id="matCh">
 ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>


<style id="matCh2">
  ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color: green;
   } 
   
  ::ng-deep
    .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
     background-color:green;
   }
 </style>

I tried this way too but shows green color only

<style>
 #matCh ::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  } 
  
 #matCh ::ng-deep
   .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
  }
</style>

It always shows green color both checkbox not red. How can I fix this

Upvotes: 2

Views: 1939

Answers (1)

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

Stackblitz : https://stackblitz.com/edit/angular-xxgcrb?file=src/app/checkbox-configurable-example.css

You have to use different css class to identify. Why always getting green color in your because this last css which override above one due to lack of unique identifier in both checkbox.

html :

<section class="example-section">
<mat-checkbox id="#matCh"   class="example-margin firstone" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox id="#matCh2"    class="example-margin secondone" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>

css :

::ng-deep .firstone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .firstone .mat-checkbox-background,
.firstone.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep .secondone.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep .secondone .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}

Even you can use id as unique indentifier as said in above comment. remove space in your id and # and use like :

::ng-deep #matCh.mat-checkbox-checked.mat-accent .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh .mat-checkbox-background,
#matCh.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: red;
}
::ng-deep #matCh2.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}
::ng-deep #matCh2 .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: green;
}

Upvotes: 1

Related Questions