Altering the Bootstrap Button Color: A Guide

To change the fill color in the SVG, you can either use a specific color filter tool or the [class] method. In the template, use [ngClass] or [style] to apply the changes. In the stylesheet, use [ngStyle] to modify the color. Alternatively, try using the below code. If none of these solutions work, you can attempt a different approach. Please note that using the code provided below is not recommended.


Solution 1:

Using [class]

In template:

[class.success]="otp?.length === 2"

In stylesheet:

.success{
  background-color: blue;
}
Using [ngClass]

In template:

[ngClass]="{ blue: otp?.length === 2 }"
[ngClass]="getClass()"

In component.ts:

getClass() {
  const isLongEnough = otp?.length === 2
  return { success: isLongEnough }
}

Or:

getClass() {
  if(otp?.length === 2)
    return 'blue'
  return ''
}

Or:

getClass() {
  if(otp?.length === 2)
    return ['blue']
  return []
}
Using [style]

In template:

[style.color]="'blue'"
Using [ngStyle]

In template:

[ngStyle]="{ 'background-color': otp?.length === 2 ? 'blue' : 'red' }"
[ngStyle]="getStyle()"

In component.ts:

getStyle() : any {
  if(otp?.length === 2)
    return { 'background-color': 'blue' }
  return {}
}



Solution 2:

Did you try like this?

[ngClass]="{'success': otp?.length == 2}"

Frequently Asked Questions