How to allow user to change font size in an angular application?

Question

How to make user change the font size and family in an angular application, need to have different settings for every user

Possible duplicate of [Set style dynamically in Angular2](https://stackoverflow.com/questions/40676203/set-style-dynamically-in-angular2) — Julian W., Jun 06 '19 at 09:06
you could use **ngStyle** https://angular.io/api/common/NgStyle — John Velasquez, Jun 06 '19 at 09:34

Black Mamba · Accepted Answer · 2020-01-22T07:11:16.970

Create a global class like fs-11, fs-12, fs-13, fs-14 By global class I mean something that is present at the top level DOM element. You can use NgClass for that. An than in your style.scss just do it like this.

.fs-11 {
  span,p {
    font-size: 11;
  }
}
.fs-12 {
  span,p {
    font-size: 12;
  }
}

Then you can use a Subject from rxjs/operator to subscribe to event that font size has changed. This is a good tutorial for that.

Then when ever the value of the font-size is passed through above Subject and whenever there is a change it'll get you the latest value.

I'll come up with a stackblitz example if I get some time till than you can work with the idea I've posted.

Here is a working StackBlitz demo I made let me know if you have any issue with that. https://stackblitz.com/edit/angular-qabs5k

score 0 · Answer 2 · edited Jun 06 '19 at 09:16

You will have one global component where is everyone it's child for example app-component. So, add users chosen font there and every child will inherit it, for example

@Component({
  selector: "app",
  template: `
    //YOUR PRESENTATION HERE
    `
})

export class AppComponent {
  @HostBinding("style.font.size")
  get userFontSize() {
    return _userFontSize;
  }

  @HostBinding("style.font.family")
  get userFontFamily() {
    return _userFontFamily;
  }

  _userFontFamily: string;
  _userFontSize: string;

  ngOnInit() {
    //Whenever you apply new value either fontsize or fontfamily, the value will be updated
    this._userFontSize = "20px";
    this._userFontFamily = "Sylfaen";
  }
}

rendered dom will be like this

<html>
    <body>
        <app style="font-size:20px;font-family:sylfaen">
        </app>
    </body>
</html>

How to allow user to change font size in an angular application?

2 Answers2