0

In my project, span elements are used to show error messages or control labels. The text color of the messages is red and I need to set the color of the text depending on the background color of the element(f.e. f1 element) which stays behind the span element in UI since I use the error messages on different input elements with different background colors. Is there any way to solve this problem? Thanks in advance.

theme.scss file

.has-error .help-block, .has-error .control-label {
  color: red;
}

login.component.html file

<form #form="ngForm" (ngSubmit)="onSubmit(form, $event)">
  <div upeFormGroup hasFeedback [hasError]="un.invalid">
    <div class="input-group">
      <input type="text"
             [(ngModel)]="user.username"
             upeFormControl
             name="username"
             #un="ngModel"
             placeholder="User"
             required>
    </div>
    <span [upeHelpBlock]="un.invalid">Please fill the name input</span>
  </div>
</form>

auth.component.html file

<div fxFlex="grow">
   <div class="form-box">
     <router-outlet></router-outlet>
   </div>
</div>

auth.component.scss file

.form-box {
   background-color: gray;
}
KingO
  • 51
  • 3

2 Answers2

0

You can use ngClass directive to add or remove classes from elements according to a specific state. Read more here https://angular.io/api/common/NgClass

Example

<span [ngClass]="{isError:un.invalid}">Please fill the name input</span>

And then in your style file

span.isError{
    color: white;
}
Francesco Lisandro
  • 700
  • 4
  • 14
  • Maybe I have to reform my question. The span elements with .has-error .help-block class names are used in different components in the project and for each of them, I want to set the text color differently depending on the bg color of different element(in the above example, depending on the .form-box bg color). – KingO Apr 09 '21 at 20:04
  • Take a look at this https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file maybe it could help. – Francesco Lisandro Apr 10 '21 at 01:00
0

If I understand you want change text color depend of the background color who is dynamic:

You could create an angular component:

<form #form="ngForm" (ngSubmit)="onSubmit(form, $event)">
  <div upeFormGroup hasFeedback [hasError]="un.invalid">
    <div class="input-group">
      <input type="text"
             [(ngModel)]="user.username"
             upeFormControl
             name="username"
             #un="ngModel"
             placeholder="User"
             required>
    </div>
    <app-error [ ... ] [isInvert]="isInvert" [message]="message"></app-error>
  </div>
</form>

app-error:


<span [ngStyle]="{color: '#000', filter: (isInvert ? 'invert(1)' : 'invert(0)')}">
   {{message}}
</span>

// for black and white but use css class for more colors
Zach
  • 36
  • 8