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;
}
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
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
}