Is there a way to apply "displayColumns" in Angular Mat table based on screen size

Question

In Angular Material table, we define the displayColumns in component file and then apply these in html template. Is there any way we can dynamically assign the value for displayColumns depending on the screen size?

I would like to display only 2 or 3 columns when displaying the table on mobile devices.

// part of component.ts
displayedColumns = ['compName', 'city', 'state', 'compCat', 'compSubcat', 'compClass', 'options'];

//part of html

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>