Search code examples
angularng-style

ngStyle directive not applied to a link tag

I'm attempting to style a link to a colour that is generated from an API. This works for text buttons etc, but when I try to apply this to a link it doesn't work.

<a href="#" [ngStyle]="{'color': brand?.colours.secondary}" *ngIf="!visitorName" (click)="setVisitor()">Don't want to give your name? That's fine! Start the review!</a>

It just gets overridden by the bootstrap link styling.

enter image description here

Applying this to a 'p' tag works just fine however - so the correct colour code is pulled from the API and loaded in ok:

<p class="mt-5" [ngStyle]="{'color': brand?.colours.secondary}">Don't worry we won't use your details for anything other then to give you the best experience possible.</p>
Solution

  • Instead of ngstyle , use attr.style.

    in SomeComponent.ts

    myColor = fetchColorSomehow(); //#ff55aa or any color

    in SomeComponent.html

    [attr.style]="'color:'+mycolor+'!important'"

    Here we are overriding the bootstrap color using !important