Динамически изменить шрифт таблицы с Angular и CSS

Question

Я работаю над проектом Angular. У меня есть эта таблица, которую я строю, но я заранее не знаю, насколько большим должен быть шрифт. Из-за этого я создал эту функцию (это код, который у меня внутри):

$('.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'
  });

ПРИМЕЧАНИЕ: f - это переменная из пользовательского ввода.

Код, который я написал, isn Это не лучший вариант для моей проблемы, потому что он не меняет шрифт моей таблицы постоянно. Он просто мигает (от 20px, который установлен по умолчанию в. css файле, до значения this.f). Мне нужно это потому, что каждые 10 секунд обновляются значения таблицы.

Надеюсь, я предоставил достаточно информации. Спасибо

Answer 1

Вы должны избавиться от всего, что jquery связано. Он не входит в Angular решение. И тогда вы должны обработать стиль с помощью CSS медиа-запросов

Answer 2

AngularJS 1,7 или Angular 6,0? вместо jquery lite селектора вы можете попробовать встроенные стили:

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

вы также можете сделать то же самое с ngClass.

Answer 3

Вы не должны использовать jQuery в Angular. Если вам нужно динамически изменить классы html элементов, я рекомендую вам использовать [(ngClass)] или медиазапросы.