Using ngClass directive to set an elements classes, ngStyle directive to set an elements style.

For this nothing is required in template, you can simple have in css file of component.

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

But lets say you only wanted this to apply when your tr have a specific class which is based on a flag in your component.ts. Lets say that className was .custom. You can achieve it like :-
CSS :-

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

HTML :-

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

In TS :-

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

What the above will do, that whenever myValue flag will be true it will attach custom class to tr. and only then on hover background color will appear. So from ts you are deciding whether to show the color on hover or not.

For th, td. There is no need of ngClass for Static properties. Ng class is generally used for dynamic binding of a css class and ngStyle is used for dynamic binding of css style(inline style). But still if you want to use it.

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>

But you will be requiring ngStyle/ngClass with each tr and th unless its inside ngFor.

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

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

Writing in the above fashion throws errors. What’s the syntax for Angular?

Please show an example of combining th, td kind of properties with ngClass/ngStyle or anything else that is applicable.