Apply Overridden SCSS to Angular Component Conditionally

Question

I am trying to override the css for an Angular-Material component. I am using the

encapsulation:ViewEncapsulation.None

to override in order to avoid the deprecated /deep/ or ::ngdeep .

so my SCSS looks like this

.some-class {
  margin: 50px
}

.some-class .mat-form-field-wrapper {
  color: red;
}

and my html 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>

but I want to apply the property color: red only when a boolean is false. I tried to use ngClass but how do I appply the entire selector (.some-class .mat-form-field-wrapper) in the ngClass syntax.

my HTML with ngclass (incomplete)

<div class="input-field">
   <mat-form-field appearance="outline" class="some-class" [ngClass]="{
        ' *some way to get the class here* ':
          !passwordsRequirementSatisfied && f.password.touched
      }">
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" required />
   </mat-form-field>
</div>

Is there any way in css or scss that I can assign the entire selector .some-class .mat-form-field-wrapper to a variable or a placeholder class or a different class so that I can use that variable/placeholder class directly with the [ngClass] syntax.

does this solve your problem? https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass?rq=1 — ciekals11, Jun 09 '21 at 13:00
it actually doesn't because in my case, the class selector is complex and not a single class which can be applied directly — Lucifer Morningstar, Jun 09 '21 at 13:03
then you can apply `[ngClass]="someMethod(variable)"` and create a method that will return class name as string — ciekals11, Jun 09 '21 at 13:05
check first example in [this answer](https://stackoverflow.com/a/50227306/9074272). For multiple classes you can combine it with [this answer](https://stackoverflow.com/a/18871805/9074272) — ciekals11, Jun 09 '21 at 13:14

score 2 · Accepted Answer · answered Jun 09 '21 at 13:25

You can try something like this:

.some-class.is-invalid .mat-form-field-wrapper {
  color: red;
}

<div class="input-field">
   <mat-form-field
    appearance="outline"
    class="some-class"
    [class.is-invalid]="!passwordsRequirementSatisfied && f.password.touched">
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" required />
   </mat-form-field>
</div>

Apply Overridden SCSS to Angular Component Conditionally

1 Answers1