Dynamically change font of a table with Angular and CSS

Question

I am working on an Angular project. I have this table, which I build but I don't know in advance how big the font should be. Because of that i created this function (this is the code i have inside of it):

$('.td').css({
    'font-size': Number(this.f) + 'px'
});

//Mobile
  $('.mobileTdLong').css({
      'width': Number(this.f) + 150 + 'px'
  });

  $('.mobileTdShort').css({
    'width': Number(this.f) + 40 + 'px'
  });

//Desktop
  $('.tableDesktopShort').css({
    'width': Number(this.f) + 100 + 'px'
  });

NOTE: f is a variable from user input.

The code I have written isn't the best one for my problem because it doesn't permenantly change my table font.. It just flickers (from 20px which is set by default in .css file, to this.f value). The reason I need this is because every 10 seconds the table values are refreshed.

I hope I provided enough information. Thanks

Johansrk · Accepted Answer · 2020-02-06 09:19:32Z

2

You should get rid of everything that is jquery related. It does not belong in an Angular solution And then you should handle the styling with CSS media queries

answered Feb 6, 2020 at 9:19

Johansrk

5,2803 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

znoris007 Over a year ago

Thanks i looked into it. However i didn't find how this should be set up. Could you give an example?

znoris007 Over a year ago

ok i think i found that this does the trick : [style.font-size.px]="f"

Johansrk Over a year ago

seriously, you should spend some time on understanding Angular better, and get rid of all jquery. Also take it out of your package.json. I can recommend Angular course on udemy, by Maximllian.

znoris007 Over a year ago

i agree, thats why i asked this question :) and i am already following Maximilian on Udemy thanks.

bigTimer314 · Accepted Answer · 2020-02-06 20:42:14Z

1

AngularJS 1.7 or Angular 6.0? instead of a jquery lite selector, you can try inline styles :

<table [ngStyle]="getStylesTableOnMobileView()">
 ...
</table>

you can also do same with ngClass.

edited Feb 6, 2020 at 20:42

answered Feb 6, 2020 at 20:33

bigTimer314

536 bronze badges

Comments

Salvatore Maruccio · Accepted Answer · 2020-02-06 10:00:21Z

0

You shouldn't use jQuery in Angular. If you need to dinamically change classes of html elements I recommend you to use [(ngClass)] or media queries.

answered Feb 6, 2020 at 10:00

Salvatore Maruccio

1744 silver badges13 bronze badges

Collectives™ on Stack Overflow

Dynamically change font of a table with Angular and CSS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related