Currently, I am attempting to customize the css for an Angular-Material component. To achieve this, I am utilizing
encapsulation:ViewEncapsulation.None
in order to sidestep using the deprecated /deep/ or ::ngdeep.
Thus, my SCSS code appears as follows:
.some-class {
margin: 50px
}
.some-class .mat-form-field-wrapper {
color: red;
}
Meanwhile, my html code looks like this:
<div class="input-field">
<mat-form-field appearance="outline" class="some-class">
<mat-label>Password</mat-label>
<input matInput formControlName="password" required />
</mat-form-field>
</div>
However, I aim to apply the style property color: red only when a boolean value is false. I experimented with ngClass but encountered challenges in referencing the complete selector (
.some-class .mat-form-field-wrapperBelow is my HTML code snippet incorporating ngClass (though incomplete):
<div class="input-field">
<mat-form-field appearance="outline" class="some-class" [ngClass]="{
' *finding a way to include the class here* ':
!passwordsRequirementSatisfied && f.password.touched
}">
<mat-label>Password</mat-label>
<input matInput formControlName="password" required />
</mat-form-field>
</div>
Are there any techniques in css or scss that would allow me to assign the entire selector
.some-class .mat-form-field-wrapper