CODEWITHSUNDEEP
angulartypescript
Zhu
Zhu

Reputation: 3895

is it possible to set <mat-hint> text color from typescript Angular 5

I am new to angular 5 here I am trying to set different hint colors based on condition.

<mat-hint style="color:#32CD32">{{hintOTP}}</mat-hint>

By using the above line I can set a specific text color for the hint text .

I know another way to achieve my goal is keeping different mat hint and hide and show them based on validation.

I want to know that is there any other way to do it effectively from typescript or ?

Upvotes: 3

Views: 11890

Answers (5)

eta32carinae
eta32carinae

Reputation: 611

To those who are trying to use mat-hint for errors (like myself!):

According to docs you should use mat-error to show errors and it uses your theme's warn color palette.

Upvotes: 0

Xfox
Xfox

Reputation: 361

In your CSS file:

mat-hint {
   color: #32CD32 !important;
}

Upvotes: 1

Alon G
Alon G

Reputation: 3373

you can also use a class.

i.e:

in your html file:

  <mat-form-field>
    <input matInput placeholder="Enter some input">
    <mat-hint class="some-color">some hint</mat-hint>
  </mat-form-field>

in your CSS file:

.some-color {
   color: #4caf50; /* green */
}

Upvotes: 1

harkesh kumar
harkesh kumar

Reputation: 883

i am doing this in my code to change background color 

 <nav mat-tab-nav-bar [backgroundColor]="background">
    <mat-icon (click)="toggleBackground()">invert_colors</mat-icon>


    toggleBackground() {
        this.background = this.background ? '' : 'primary';
      }

Upvotes: 0

user184994
user184994

Reputation: 18271

In the HTML use the following:

<mat-hint [ngStyle]="{color: hintColor}">HINT</mat-hint>

Then, in the TS code, you can change the color like so:

this.hintColor = '#ff0000'

Which would change the hint to red.

Here is a StackBlitz demo

Upvotes: 2

Related Questions