CODEWITHSUNDEEP
angularng-style
Web Develop Wolf
Web Develop Wolf

Reputation: 6326

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>

Upvotes: 0

Views: 408

Answers (1)

abhay tripathi
abhay tripathi

Reputation: 4022

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

Upvotes: 1

Related Questions