Search code examples
javascriptcssangularstylesionic4

How to change the font-family of paragraph on button click in angular 8

I am trying to make a web app where the user can set any font-style provided by the app for his writing.

I am using 20-30 font-style. I am trying to set them dynamically on the button click using [ngStyle]

and passing styles like {'font-family': 'Roboto, Helvetica, sans-serif'} But none of them work. Everything is working like color, size but not font-family.

Can you tell me the correct procedure or What I'm doing wrong?

Solution

  • I have tried to set font dynamically using ngStyle as you described and it worked for me. Look at this code

    font = 'Roboto, Helvetica, sans-serif';

setFont() {
    this.font = this.font ==='Roboto, Helvetica, sans-serif' ? 'Ariel' : 'Roboto, Helvetica, sans-serif'
}

    <button  type="button"  (click)="setFont()">ADD</button>
<div [ngStyle]="{'font-family': font}">{{ font }}</div>