ngdeep in angular for a specific component or element-CodePudding

How do we use ng deep css class only specific to only for example 1 checkbox and not all checkboxes in my component

for example I only want to use this with my one checkbox and not all checkboxes in my component. how do we do that ? thanks.

I only want to apply it on a specific checkbox . cause in my component there is 5 different checkboxes but I only want to modify 1 checkbox , so the 4 should not be affected.

So for example there are 2 checkbox below , the CSS should only affect the first checkbox and not include the second one

#checkbox code

 <mat-checkbox
                  *ngIf="currentSelectedTenants(subtenant) else currentSubtenants"
                   color="accent"  
                   [(ngModel)]="dealDispositionFormFields.currentSubtenants"
                   [checked]="currentSelectedTenants(subtenant)" 
                   (change)="changeCurrentSubtenants($event,subtenant)"
                   style="margin-left:10px;">
                  <mat-label class="alter-text-color" style="font-size: 12px;">{{subtenant.subtenantName}}</mat-label>
                  </mat-checkbox>  


 <mat-checkbox
                  *ngIf="currentSelectedTenants(subtenant) else currentSubtenants"
                   color="accent"  
                   [(ngModel)]="dealDispositionFormFields.notCurrentSubtenant"
                   [checked]="currentSelectedTenants(subtenant)" 
                   (change)="changeCurrentSubtenants($event,subtenant)"
                   style="margin-left:10px;">
                  <mat-label class="alter-text-color" style="font-size: 12px;">{{subtenant.subtenantName}}</mat-label>
                  </mat-checkbox>

#css

::ng-deep .mat-checkbox-checkmark-path {
    stroke:rgba(0, 125, 255, 1) !important;
  }

CodePudding user response：

You can add mat-checkbox inside a div and assign one class to it:

<div class="new-class">
  <mat-checkbox>
  </mat-checkbox>
</div>

And your css will look like this:

::ng-deep .new-class .mat-checkbox-checkmark-path {
    stroke:rgba(0, 125, 255, 1) !important;
 }

PS: You can name new-class as per your requirement

CodePudding user response：

Use a css class in the mat-checkbox you want to customize:

<mat-checkbox class="custom-mat-checkbox">
...
</mat-checkbox>

And then customize it via CSS.

::ng-deep mat-checkbox.custom-mat-checkbox {
   // custom css goes here
}