как мне условно отображать угловые матовые вкладки на меньшем экране?

Вы сможете сделать это с помощью CDK Layout BreakpointObserver и разбить содержимое на отдельные компоненты. Например:

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(
    private breakpointObserver: BreakpointObserver,
  ) { }

}

<ng-container *ngIf="(isHandset$ | async) === true; then thenTemplate; else elseTemplate"></ng-container>

<ng-template #thenTemplate>
    <mat-tab-group>
      <mat-tab label="First"><div> <app-content-1></app-content-1> </div></mat-tab>
      <mat-tab label="Second"><div> <app-content-2></app-content-2> </div></mat-tab>
      <mat-tab label="Third"><div <app-content-3></app-content-3> </div> </mat-tab>
    </mat-tab-group>
</ng-template>

<ng-template #elseTemplate>
    <div>
      <div> <app-content-1></app-content-1> </div>
      <div> <app-content-2></app-content-2> </div>
      <div> <app-content-3></app-content-3> </div> 
    </div>
</ng-template>

Обратите внимание, что каждый фрагмент контента должен быть выделен в отдельный подкомпонент. Некоторая информация, которая, я думаю, может быть полезной, вы можете найти точные размеры каждой точки останова и то, как она называется, по этой ссылке.

Изменить: Перевернуто ng-if