CODEWITHSUNDEEP
cssangular
znoris007
znoris007

Reputation: 11

Dynamically change font of a table with Angular and CSS

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

Upvotes: 0

Views: 304

Answers (3)

bigTimer314
bigTimer314

Reputation: 53

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.

Upvotes: 1

Salvatore Maruccio
Salvatore Maruccio

Reputation: 174

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.

Upvotes: 0

Johansrk
Johansrk

Reputation: 5250

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

Upvotes: 2

Related Questions