Как объединить теги и их свойства в шаблон Angular?

Question

    <table border-bottom = 2>
        <th, td >
        {
            padding: 15px;
            text-align: left;
        }

        <tr:hover {background-color:#f5f5f5;}></tr>
    </table>

Запись описанным выше способом выдает ошибки. Какой синтаксис для Angular?

Пожалуйста, покажите пример комбинирования свойств th, td с ngClass / ngStyle или чем-либо еще, что применимо.

Answer 1

Использование директивы ngClass для установки классов элементов, ngStyle директивы для установки стиля элементов.

Answer 2

Для этого в шаблоне ничего не требуется, вы можете просто иметь в css файл компонента.

tr:hover {
  background-color:#f5f5f5;
}

Но, допустим, вы хотели, чтобы это применялось только тогда, когда в вашем tr есть спецификация c класс, который основан на флаге в вашем component.ts. Допустим, что className было .custom. Вы можете добиться этого следующим образом: - CSS: -

tr.custom:hover {
  background-color:#f5f5f5;
}

HTML: -

<table>
   <tr [ngClass]="{'custom': myValue}"></tr>
</table>

В TS: -

   @Input() data: number;
   public myValue = false;
   ngOnInit() {
      if(data>5) {
            myValue = true; 
      } else {
            myValue = false;
      }
   }

Что за выше будет, что всякий раз, когда флаг myValue будет истинным, он будет прикреплять настраиваемый класс к tr. и только тогда при наведении появится цвет фона. Итак, из ts вы решаете, показывать ли цвет при наведении или нет.

Для th, td. Для свойств Stati c нет необходимости в ngClass. Класс Ng обычно используется для динамической c привязки класса css, а ngStyle используется для динамической c привязки стиля css (встроенный стиль). Но все же, если вы хотите его использовать.

NgStyle

TS: -

 public padding= 15px;
 public align: left;

HTML: -

 <td [ngStyle]="{'padding': padding, 'text-align': align}"></tr>
 <th [ngStyle]="{'padding': padding, 'text-align': align}"></th>

NgClass

CSS: -

  th.custom, td.custom {
     padding: 15px;
     text-align: left;
  }

HTML: -

   <td [ngClass]="{'custom': true}"></tr>
   <th [ngStyle]="{'custom': true}"></th>

Но вам потребуется ngStyle / ngClass с каждым tr и th, если он не находится внутри ngFor.