CODEWITHSUNDEEP
angularionic2ionic3
MrFlyingToasterman
MrFlyingToasterman

Reputation: 227

How can I add additional style properties in CSS in Angular?

I have a property which should set the font size of a text element. I've tried this so far:

<textarea 
  placeholder="Enter your TAX ID" 
  id="tax" 
  [(ngModel)]="tax_out" 
  [(ngModel)]="tax_in" 
  style="width: 100%; height: 100%; position: relative; bottom: 0px; fontsize: {{fontsize}}">
</textarea>

Unfortunately without success.

I get this in logcat:

"WARNING: sanitizing unsafe style value width: 100%; height: 100%; position: relative; bottom: 0px; fontsize: (see http://g.co/ng/security#xss)."

"[WARN] TypeError: Cannot set property style of [object Object] which has only a getter"

"ERROR", source: ng:///AppModule/ModalContentPage.ngfactory.js (154)

"ERROR CONTEXT", source: ng:///AppModule/ModalContentPage.ngfactory.js (154)

Upvotes: 1

Views: 703

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

If it's just a single style, you can use property binding for this:

<textarea [style.font-size.px]="fontsize" ... style="width: 100%; height: 100%; position: relative; bottom: 0px;"></textarea>

Please take a look at the ngStyle docs for more info if you need to set more than one style dynamically:

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>    
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>    
<some-element [ngStyle]="objExp">...</some-element>

Upvotes: 3

Related Questions